淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3过渡和动画可以让网页的效果更加生动,吸引用户的眼球。其中,旋转也是一种常用的动画效果。

.box {
width: 100px;
height: 100px;
background-color: #f00;
transition: transform 1s;
}
.box:hover {
transform: rotate(360deg);
}

上面的代码实现了当鼠标悬停在盒子上时,盒子会沿着中心点旋转360度。其中,transition属性指定了变化的时长,transform属性指定了旋转的角度。

如果想要使盒子在一定时间内不停地旋转,可以使用以下代码:

.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

上面的代码中,animation属性指定了动画名称、时长、过渡方式和循环次数。而@keyframes关键字则定义了动画的具体内容,这里是从0%到100%的旋转动画。

总之,旋转动画是一种简单而又实用的CSS3动画效果。可以使用过渡和关键帧两种方式实现。希望大家能够尝试一下,为网页增添生动的气息。