在CSS中,我们可以使用“transform”属性来实现让一个圆自转的效果,下面是实现的具体代码:.circle { width: 100px; height: 100px; border-radiu
在CSS中,我们可以使用“transform”属性来实现让一个圆自转的效果,下面是实现的具体代码:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上面的代码中,首先创建了一个class为“circle”的元素,宽高都为100px,边框半径为50%,背景色为红色。然后使用“animation”属性来设置动画效果,属性值包括“动画名称”、“持续时间”、“时间函数”和“重复次数”。其中“动画名称”为“rotate”,这个名称与下面的“@keyframes”关键字的后面相匹配。这表示让元素按照“rotate”的效果进行动画演示。持续时间为2s,即2秒。时间函数为“linear”,表示动画运动的速度是均匀的,不会加速或减速。重复次数为“infinite”,表示无限次。
最后,在“@keyframes”中定义了从0度到360度的旋转动画效果,从0度开始逐渐增加到360度,示意代码如下:
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
这样,一个自转的圆就完成了。
粉丝
0
关注
0
收藏
0