首页 > Web开发 > 详细

css3 风车旋转

时间:2016-10-04 16:09:31      阅读:225      评论:0      收藏:0      [点我收藏+]
    <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 风车旋转

原文:http://www.cnblogs.com/cuidan9495/p/5930556.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!