#content-slide-3 .fourth_liubian{
width:1282px;
height:1038px;
position:absolute;
z-index:8;
top:0px;
left:-320px;
background-color:white;
-webkit-clip-path:polygon(320px 0px,961px 0px,1282px 555px,961px 1038px,320px 1038px,0px 555px);
transform-origin:641px 555px;
animation:8s fourth_liubian4 forwards;
-webkit-animation:18s fourth_liubian4 forwards;
-moz-animation:8s fourth_liubian4 forwards;
-o-animation:8s fourth_liubian4 forwards;
}
@-webkit-keyframes fourth_liubian4{
0%{
transform:scale(1,1) rotate(0deg);
}
100%{
transform:scale(0,0) rotate(360deg);
}
}
<div id="content-slide-3">
<div class="fourth_liubian"></div>
</div>
请运行以下代码,需求:做一个正六边形,并且给正六边形添加动画,动画效果为正六边形进行缩小的同时进行旋转。出现的问题:切出来的正六边形不添加动画效果时是正常的,但是添加动画效果后,动画效果播放的过程中正六边形的周围会出现一些个不正常的图片干扰,而且每次刷新出现的东西不一样,当动画播放完毕后,图片又回到正常状态。求解答
ps:求另一种切正六边形的方法,要整体的正六边形,拼接的不要,谢谢