首页 > 代码库 > css3 风车旋转

css3 风车旋转

    <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(1),.box div:nth-of-type(4){border-radius:0px 100px;}     .box div:nth-of-type(2),.box div:nth-of-type(3){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;可以设置播放的速度

css3 风车旋转