需求:
让下面的图片绿色的箭头框按顺时针做360度旋转,文字保持不动。
用css3实现这种需求so easy,当然有人会说用gif图更方便,的确gif图很方便这点不否认
好了言归正传上代码:
- html:
<div class="run_icon">
<img class="runImg" src="../../assets/image/coolStationImg/run_icon.png" alt="运行">
<div class="run_text">运行</div>
</div>
- css:
.run_icon {
margin-top: 50px;
margin-left: 50px;
position: relative;
display: flex;
font-size: 14px;
color: rgba(51, 198, 124, 1);
height: 80px;
width: 80px;
.runImg {
-webkit-animation: rotateImg 2s linear infinite;
height: 70px;
width: 70px;
vertical-align: middle;
}
.run_text {
position: absolute;
top: 25px;
left: 22px;
z-index: 3;
}
}
@keyframes rotateImg {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rotateImg {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}
网友评论