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

html-css015

css3圆环旋转效果动画怎么做,第1张

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

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

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

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

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

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

无需js css3直接能搞定材料：3张png （背景框框，两个发光的点点）；布局用定位做css3里面的animation做动画hover触发动画请问用js或者css3怎么能实现元素边框动画效果，如图！

我想的应该是四个边用四个标签模拟一下。。然后每个边用css3处理做动画。

不知道有没有更好的办法。

<style>

.outer{position:relativewidth:100pxheight:100pxborder:3px solid #ccc}

.outer i{}

.outer:before,

.outer:after{position:absolutedisplay:blockcontent:""-webkit-transition:all 0.1s}

.outer:before{top:-3pxleft:-3pxwidth:0height:0border-top:3px solid #F00-webkit-transition-delay: 0.3s}

.outer:after{bottom:-3pxright:-3pxwidth:0height:0border-top:3px solid #F00-webkit-transition-delay: 0.1s}

.outer i:before,

.outer i:after{position:absolutedisplay:blockcontent:""-webkit-transition:all 0.1s}

.outer i:before{left:-3pxbottom:-3pxheight:0width:0border-left:3px solid #F00-webkit-transition-delay: 0s}

.outer i:after{right:-3pxtop:-3pxheight:0width:0border-left:3px solid #F00-webkit-transition-delay: 0.2s}

.outer:hover:after,

.outer:hover:before{width:103px}

.outer:hover i:after,

.outer:hover i:before{height:103px}

.outer:hover:before{-webkit-transition-delay: 0s}

.outer:hover:after{-webkit-transition-delay: 0.2s}

.outer:hover i:after{-webkit-transition-delay: 0.1s}

.outer:hover i:before{-webkit-transition-delay: 0.3s}

</style>

<div class="outer">

<i></i>

</div>