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

Question

如题所述

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

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

因为css3动画需要现代比较高级的浏览器才行，所以小编用chrome浏览器来测试，所以加了-webkit前缀。
<style type="text/css">
.img{
width:200px;
height:200px;
border:100px solid green;
border-left-color: red;
border-right-color: black;
border-top-color: yellow;
margin:100px;
border-radius:50%;
-webkit-animation:circle 1s infinite linear;/*匀速 循环*/
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
</style>
来看一下最后的效果，还是不错的。本回答被网友采纳

Answer 3

运用animation就足够了。

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

<div class:"king"></div>

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

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

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

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

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

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

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

本回答被提问者采纳

Answer 4

设置ritateZ的值就可以了