您的位置：首页 > Web前端 > CSS

css3实现圆形逐渐减少动画

2016-12-20 16:16 204 查看

写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：

1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。

2.做出另一组div更换背景色即可实现反方向的旋转。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.outer{
position:relative;
left:100px;
top:100px;
height:100px;
width:100px;
}
.cont1,.cont2{
position:absolute;
height:100%;
width:100%;
border-radius:50px;
overflow: hidden;
}
.cont1{
background:red;
opacity:1;
animation:hide 4s steps(1,end) infinite;
}
.cont2{
background:blue;
opacity:0;
animation:show 4s steps(1,end) infinite;
}
.rotateDiv{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:blue;
height:100%;
width:50%;
transform-origin:center right;
animation:rotate 2s infinite linear;
/*            transition:transform 2s;*/
}
.right{
position:absolute;
left:50px;
top:0;
border-radius:0 50px 50px 0;
background:blue;
height:100%;
width:50%;
opacity:1;
animation: hide 2s steps(1,end) infinite;
}
.left{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:red;
height:100%;
width:50%;
opacity:0;
animation: show 2s steps(1,end) infinite;
}
/*        .left-rotate:hover{
transform:rotate(180);*/

.cont2 .rotateDiv, .cont2 .right{
background:red;
}
.cont2 .left{
background:blue;
}
/*css动画*/
@keyframes rotate
{
0%   {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
@keyframes show
{
0%   {opacity:0;}
50%,100% {opacity:1;}
}
@keyframes hide
{
0%   {opacity:1;}
50%,100% {opacity:0;}
}
</style>
</head>
<body>
//css3动画
<div class="outer">
<div class="cont1">
<div class="rotateDiv"></div>
<div class="right"></div>
<div class="left"></div>

</div>
<!--反方向的旋转-->

<div class="cont2">
<div class="rotateDiv"></div>
<div class="right"></div>
<div class="left"></div>
</div>
</div>
</body>
</html>

其中用到了一个css3,动画的step(1,end)，不太理解。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航