css3 设置过渡效果

CSS3 可以让我们很方便地设置过渡效果，让页面看起来更加流畅、生动。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 0.5s;
}
.box:hover {
    background-color: blue;
}
    

上面这段代码可以让一个红色的正方形在鼠标悬浮时变成蓝色。它的原理是给 .box 元素添加了一个 transition 属性，告诉浏览器在属性变化时要过渡多长时间，并且把要过渡的属性写在后面。在这个例子里，我们过渡的是背景色（background-color）。

需要注意的是，过渡效果只会在属性从一种状态到另一种状态时才会触发。如果 .box 的背景色一开始就是蓝色，那么悬浮时不会有任何效果。此外，我们还可以设置过渡的 easing、delay 等属性，具体可以查看相关文档。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！