首页 > 代码库 > 会动的大风车(css3)

会动的大风车(css3)

今天用css3的写了一个会动的大风车,使用translate和rotate布局,使用animation制作动画效果;分享给大家

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body,html{
            width: 100%;
            height: 100%;
            overflow:hidden;
        }
        @keyframes move{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(360deg);
            }
        }
        #box{
            width:200px;
            height:200px;
            margin:100px auto;
            position:relative;
            -webkit-animation:4s move linear infinite running;
        }
        #box div{
            width: 100px;
            height: 50px;
            border-radius:0 0 50px 50px;
            -webkit-transform-origin:right center;
            position:absolute;
        }
        .red{
            background:-webkit-radial-gradient(right,circle,red,#000);
            transform:translateX(100px) translateY(100px);
        }
        .yellow{
            background:-webkit-radial-gradient(right,circle,yellow,#000);
            transform:translateX(-25px) translateY(175px) rotateZ(90deg);
        }
        .blue{
            background:-webkit-radial-gradient(right,circle,blue,#000);
            transform:translateX(-100px) translateY(50px) rotateZ(180deg);
        }
        .green{
            background:-webkit-radial-gradient(right,circle,green,#000);
            transform:translateX(25px) translateY(-25px) rotateZ(-90deg);
        }
        #box .dot{
            width: 20px;
            height: 20px;
            background:-webkit-radial-gradient(rgba(255,255,255,1),rgba(0,0,0,1));
            border-radius:50%;
            top:50%;
            left:50%;
            margin:-10px 0 0 -10px;
        }

    </style>
</head>
<body>
    <div id="box">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="dot"></div>
    </div>
</body>
</html>

  

会动的大风车(css3)