码迷,mamicode.com
首页 > Web开发 > 详细

css3 风车旋转

时间:2016-10-04 16:10:13      阅读:156      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!