效果图如下:鼠标移上去加快旋转速度,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>