收藏
回答

CSS 动画问题

问题模块
API和组件

我想通过CSS的关键帧动画写一个扇形图转动的动画:

使用的CSS代码如下:

.pie {
margin-top: 460rpx;
 width: 160rpx; height: 160rpx;
 border-radius: 80rpx;
 background: #d8eeff;
 background-image: linear-gradient(to right, transparent 50%, #22E228 0);
 overflow: hidden;
}
.color-mask {
background-color: red;
 margin-left: 50%;
 height: 100%;
 overflow: hidden;
 transform-origin: left;
 animation: spin 3s linear infinite;

}


@keyframes spin {
to { transform: rotate(.5turn); }
}



<view class="pie">
 <view class="color-mask" />
 <!--<view class="pie-mask" />-->
</view>


然后这段代码在模拟器上运行的很好。但是在IOS真机上,color-mask的形状变的非常奇怪:

如果不使用动画的话,就不会出现这些边角,请问这是什么原因呢?


最后一次编辑于  2017-12-18  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏