趣味CSS3(一)--旋转的大风车

这是一个比较酷炫一点的大风车,不断旋转的大风车。纯碎是用CSS3来写的。
我就直接把整个页面写出来了,有需要的同学,直接复制就OK了。


<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>大风车-转啊转title>
        <style>
            #box {
                width: 400px;
                height: 400px;
                margin: 200px auto;
                position: relative;
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear infinite;
            }

            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                border-radius: 100px 100px 0 0;
                position: absolute;
                background-image: linear-gradient(red, yellow);
            }

            .css1 {
                top: 100px;
            }

            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .css4 {
                top: 250px;
                left: 50px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                transform: rotate(270deg);
            }

            .ssss {
                width: 100px;
                height: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                background-image: radial-gradient(yellow, #fff);
            }

            .hhh {
                width: 2px;
                height: 350px;
                background-image: radial-gradient(yellow, #fff);
                position: absolute;
                top: 200px;
                left: 199px;
                z-index: -1;
            }

            @keyframes dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate( 90deg);
                    -moz-transform: rotate( 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);
                    transform: rotate( 90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        style>
    head>

    <body>
        <div id="box">
            <div id="main">
                <div class="css1">div>
                <div class="css2">div>
                <div class="css3">div>
                <div class="css4">div>
                <div class="ssss">div>
            div>
            <div class="hhh">div>
        div>

    body>

html>

嗯哈,其实也不难。效果还是蛮炫的。

你可能感兴趣的:(Css)