icon旋转动画效果
<img :src="item.img" alt="" class="icon-in" :class="[item.name]" />
.icon-in.wind-speed {
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
animation: windspeed 2.5s linear infinite;
}
@keyframes windspeed {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}