CSS -- CSS使用过渡(transition)添加动画
/* 定义一个简单的动画过渡效果 */
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s, background-color 1s; /* 应用过渡效果 */
}
/* 鼠标悬停时改变宽度和背景色 */
.box:hover {
width: 200px;
background-color: red;
}
这段代码定义了一个名为 .box
的类,它在宽度和背景色属性上应用了过渡效果。当鼠标悬停在 .box
元素上时,该元素的宽度和背景色将在1秒钟内改变,从而产生平滑的过渡动画效果。
评论已关闭