css双圆环旋转效果

最新推荐文章于 2024-05-30 10:50:01 发布

辣姐什么鬼

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量3.8k

点赞数 1

分类专栏： web前端 css

本文链接：https://blog.csdn.net/liona_koukou/article/details/79578630

版权

web前端同时被 2 个专栏收录

174 篇文章 6 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

效果图如下：鼠标移上去加快旋转速度，rem做单位，两个圆环的图片可以随便找在此不上传了

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>旋转效果</title>
    <script>
        function fontAuto(){
            document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
        }
        fontAuto();
        window.onresize=function () {
            fontAuto();
        };
    </script>
    <style>
        *{margin:0 auto;}
        html,body{background:#09203e;width:100%;height:100%;}
        /*旋转球部分*/
        .circle_div{position:absolute;cursor:pointer;width:4.8rem;height:4.8rem;top:10%;left:50%;margin-left:-2.4rem;}
        .circle_div:hover .circle_rate{animation-timing-function: ease;animation-duration:3s;}
        .circle_rate{width:100%;height:100%;  position: absolute;top:0;left:0;z-index:1;  transition: all;  transform-origin: center;  animation-fill-mode: both;  animation-duration: 12s;  animation-iteration-count: infinite;  animation-timing-function: linear;  }
        .rotate-out{animation-name: rotate-out ;width:3.2rem;height:3.2rem;top:0.8rem;left:0.8rem;}
        .rotate-in{animation-name: rotate-in;}
        @keyframes rotate-out{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-out{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        @-ms-keyframes rotate-out{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        @-webkit-keyframes rotate-out{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        @keyframes rotate-in{ from{transform: rotate(360deg);} to{transform: rotate(0deg);} }
        @-moz-keyframes rotate-in{ from{transform: rotate(360deg);} to{transform: rotate(0deg);} }
        @-ms-keyframes rotate-in{ from{transform: rotate(360deg);} to{transform: rotate(0deg);} }
        @-webkit-keyframes rotate-in{ from{transform: rotate(360deg);} to{transform: rotate(0deg);} }
    </style>
</head>
<body>
<div class="circle_div">
    <img class="circle_rate rotate-in" src="img/btn1-cir2.png"/>
    <img class="circle_rate rotate-out" src="img/btn1-cir1.png"/>
</div>
</body>
</html>

辣姐什么鬼

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
css双圆环旋转效果

效果图如下：鼠标移上去加快旋转速度，rem做单位，两个圆环的图片可以随便找在此不上传了代码如下： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&quo
复制链接

扫一扫