2.CSS 使用 transition过渡 属性 和 transform变化 属性实现动画效果
/* 定义一个带有过渡效果的类 */
.transition-box {
width: 100px;
height: 100px;
background-color: #42b983;
transition: transform 1s; /* 指定transform变化时使用过渡效果，持续时间1秒 */
}
/* 当鼠标悬停时改变元素的transform属性 */
.transition-box:hover {
transform: translateX(50px) rotate(180deg); /* 变化为向右移动50像素并旋转180度 */
}这段CSS代码定义了一个名为.transition-box的类，它在悬停时会使用过渡效果将元素向右移动50像素并旋转180度。transition属性指定了应用过渡的属性（这里是transform）以及完成过渡的时间。这是一个简单的例子，展示了如何将过渡效果应用于动态变化的CSS属性。
评论已关闭