css3实现圆形逐渐减少动画

最新推荐文章于 2021-08-04 05:41:49 发布

weixin_30721899

最新推荐文章于 2021-08-04 05:41:49 发布

阅读量183

点赞数

原文链接：http://www.cnblogs.com/jlj9520/p/6203089.html

版权

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

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)，不太理解。。。

转载于:https://www.cnblogs.com/jlj9520/p/6203089.html

weixin_30721899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3实现圆形逐渐减少动画

写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。2.做出另一组div更换背景色即可实现反方向的旋转。代码如下：<!DOCTYPE html><html><head> &...
复制链接

扫一扫