前端提高篇CSS3进阶14：transition过渡动画，web前端开发h5
/* 定义一个简单的过渡动画，在鼠标悬停时触发 */
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s, background-color 1s;
}
.box:hover {
width: 200px;
background-color: red;
}这段CSS代码定义了一个名为.box的类，它在鼠标悬停时会改变自身的宽度和背景色，并且在这些变化发生时加入了平滑的过渡动画效果。transition属性被用来指定哪些属性应该有过渡效果，以及这些过渡效果的持续时间。在.box:hover伪类中，当鼠标悬停在元素上时，宽度会从100px变为200px，背景色会从蓝色变为红色，并且这个变化会在1秒钟内平滑过渡。
评论已关闭