css3 风车旋转

时间:2021-12-18 12:24:32
    <style>
.box{width:400px;height:400px;margin:100px auto;transition:1s;}
.box div{width:180px;height:180px;margin:10px;border:1px solid red;
background:deeppink;box-sizing:border-box;float:left;text-align:center;
line-height:180px;}
.box div:nth-of-type(),.box div:nth-of-type(){border-radius:0px 100px;}
.box div:nth-of-type(),.box div:nth-of-type(){border-radius:100px 0px;}
.box:hover{-webkit-transform:rotate(800deg);}
</style>
</head>
<body>
<div class="box">
<div>我</div>
<div>要</div>
<div>努</div>
<div>力</div>
</div>
</body>
通过transition:1s;可以设置播放的速度