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动画效果。可以使用过渡和关键帧两种方式实现。希望大家能够尝试一下,为网页增添生动的气息。