纯CSS实现炫酷旋转小风车

最新推荐文章于 2022-10-16 12:18:54 发布

diaolue7475

最新推荐文章于 2022-10-16 12:18:54 发布

阅读量181

点赞数

原文链接：http://www.cnblogs.com/Best-Chen/p/9739545.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>旋转小风车</title>
        <style type="text/css">            
            .container{
                position: absolute;
                top:12%;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            
            .box_block{
                position: relative;
                width: 300px;
                height: 300px;
                margin: 0 auto;
                animation: Positive_rotation 4s linear infinite;
            }
            
            .box_block:hover{
                animation:contrarotation .8s linear infinite;/*linear 动画从头到尾的速度是相同的*/
                /*infinite 动画无限次播放*/
            }
            
            /*反向旋转*/
            @keyframes contrarotation{
                from{transform: rotate(0deg)}
                to{transform: rotate(-360deg)}
            }
            
            /*正向旋转*/
            @keyframes Positive_rotation{
                from{transform: rotate(0deg);}
                to{transform: rotate(360deg);}
            }
            
            .div1{
                width: 0;
                height: 0;
                border:75px solid #ffb02d;
                border-left-color: transparent;/*隐藏*/
                border-bottom-color: #3aa37a;
                float: left;
            }
            
            .div2{
                width: 0;
                height: 0;
                border: 75px solid #ffcd35;
                border-top-color: transparent;
                border-right-color: #ee7a65;
                float: left;
            }
            
            .div3{
                width: 0;
                height: 0;
                border:75px solid #a0bd77;
                border-bottom-color: transparent;
                border-right-color: #5687e7;
                float: left;
            }
            
            .div4{
                width: 0;
                height: 0;
                border:75px solid #5697fe;
                border-right-color: transparent;
                border-top-color: #ee7a65;
                float: left;
            }
            
            .stick{
                width: 14px;
                height: 400px;
                background: #666666;
                z-index: -1;
                left: 0;
                top:86px;
                bottom:0;
                right: 0;
                margin: auto;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box_block">
                <div class="div1"></div>
                <div class="div2"></div>    
                <div class="div3"></div>
                <div class="div4"></div>
                <div class="remove_blocks" style="clear: both;"></div>
            </div>
            <div class="stick"></div>            
        </div>
    </body>
</html>