css3圆环旋转效果动画怎么做

2024-11-14 10:52:02

推荐回答（4个）

回答1：

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

回答2：

方法/步骤
首先我们新建一个html空白文档，取名字叫做css3动画，保存一下。

然后写html结构，我们只需要一个div元素即可，class名字叫做img。我们设置其边框为不同的颜色，边框宽度设置成100px。

因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

接下来就是关键的步骤了，也就是添加动画效果。

因为css3动画需要现代比较高级的浏览器才行，所以小编用chrome浏览器来测试，所以加了-webkit前缀。

来看一下最后的效果，还是不错的。

回答3：

运用animation就足够了。

首先用div起一个名字。比如

然后用css定义你做的运动帧。

第一个start是：编写动画（是在下一步单独操作，不在这个King里面）,这个start是随便起的名字，你可以叫 haha 都可以。自定义

第二个：15s 就是你做这个动画做一次执行15s，这个你自己定。

第三个：4 就是次数。如果无限循环用infinite

.king{ animation: start 15s 4/infinite  }

然后就做运动了,但是有很多人做完，不知道为什么动不了。因为很多人总是不记着把自己起名字的比如本次的名字 start

 @keyframes start{
 0%{}
 100%{}
 }

回答4：

设置ritateZ的值就可以了