简述:
CSS过渡,就是样式发生变化时,可以看上去更自然,更柔和。想让哪个盒子有过渡样式,就把transition属性加在那个盒子上。
语法:
CSS过渡效果
代码:
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>/* 设置盒子的初始样式 */div {float: left;margin-right: 10px;width: 200px;height: 200px;text-align: center;line-height: 200px;background-color: skyblue;}/* 鼠标悬停时改变盒子颜色 */div:hover {background-color: greenyellow;}/* 第一个盒子设置过度效果 */div:first-child {transition: all .8s linear 0s;}</style><body><div>设置过度效果</div><div>未设置过度效果</div></body></html>
运行:
解释:
例中代码很简单,<body>部分就是两个<div>盒子,<style>中, 第一部分设置两个盒子的初始样式, 第二部分设置两个盒子鼠标悬停时的样式。
第三部分才是实现过渡的地方,
还记得文章开头说的,想让哪个盒子使用过渡效果,就把 transition加在那个盒子上
此处,因为想对第一个盒子使用过渡效果, 所以这里用 div:first-child选择了第一个盒子, 然后使用了过渡属性的简写形式
transition: all .8s linear 0s;
all: 所有样式变化,都应用过渡效果
.8s:过渡效果持续0.8秒
linear: 过渡效果匀速展示
0s: 不延迟,发生CSS属性改变后,马上使用过渡效果展示新样式