代码片段:
.square {
position: absolute;
top: 0;
left: 0;
width: 124rpx;
height: 120rpx;
backface-visibility:hidden;
animation: roatate1 800ms linear infinite;
-webkit-animation: roatate1 800ms linear infinite;
transition: all 1s;
}
@keyframes roatate1 {
0% {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
//wxml
<!-- 动画图 -->
<cover-view class="icon">
<cover-image
src="https://cmspic-10004025.image.myqcloud.com/770329f0-0cc8-11ea-a23b-61ccb1018642_size_124x120"
class="box"
></cover-image>
<cover-image
src="https://cmspic-10004025.image.myqcloud.com/9694ad20-0cc8-11ea-a23b-61ccb1018642_size_124x120"
class="square"
/>
<cover-image
src="https://cmspic-10004025.image.myqcloud.com/cd250790-0cc8-11ea-a23b-61ccb1018642_size_124x120"
class="kw"
></cover-image>
</cover-view>
cover-*不支持动画,已真机为准