关于overflow风车，overflow这个很多人还不知道，今天小怡来为大家解答以上的问题，现在让我们一起来看看吧！

1、 动态风车 body{ background:purple; overflow:hidden; } *{ margin:0; padding:0; } ul{ position:relative; width:100px; height:100px; top:100px; left:50%; margin-left:-50px; transform-style:preserve-3d; animation:sport15slinear0sinfinitenormal; } ul:hover{ animation:sport1.5slinear0sinfinitenormal; } @keyframessport{ form{ transform:rotateZ(0deg); } to{ transform:rotateZ(360deg); } } ulli{ position:absolute; top:0; left:0; border:50pxsolidtransparent; list-style:none; } li.li_1st{ border-bottom:50pxsolid#5697FD; transform:translateY(-70px)rotateZ(45deg); } li.a{ border:35pxsolidtransparent; border-bottom:35pxsolid#5687E7; transform:translate(50px,-20px)rotateZ(90deg); } li.li_2nd{ border-bottom:50pxsolid#A1BD76; transform:translateX(70px)rotateZ(135deg); } li.b{ border:35pxsolidtransparent; border-bottom:35pxsolid#3AA37A; transform:translate(50px,50px)rotateZ(180deg); } li.li_3th{ border-bottom:50pxsolid#FFB12C; transform:translateY(70px)rotateZ(225deg); } li.c{ border:50pxsolidtransparent; border-bottom:50pxsolid#FFCD34; transform:translate(0px,0px)rotateZ(45deg); z-index:1; } li.li_4th{ border-bottom:50pxsolid#EF7A64; transform:translateX(-70px)rotateZ(315deg); } li.d{ border:35pxsolidtransparent; border-bottom:35pxsolid#C1523E; transform:translate(-20px,-20px)rotateZ(0deg); } div.e{ position:relative; width:10px; height:200px; background-color:gray; top:50px; left:257px; z-index:-1; } 。

本文到这结束，希望上面文章对大家有所帮助。