css3+div畫大風車


      今天已經禮拜三了,周天小穎家的佩佩就要結婚啦,小穎要去當伴娘了,哈哈哈哈哈哈,想想都覺得樂開了花,不過之前她給我說讓我當她伴娘時,我說我要減肥,不然她那么瘦弱,我站旁邊就感覺像一個圓滾滾的小皮球,小穎太胖了,唉主要是管不住嘴啊,太愛吃了,這樣下去真的不好不好不好,遲早有一天會把稱壓壞了的,哈哈哈哈不開玩笑啦。

     下面呢我們來看看到底畫了個怎樣的大風車呢,嘻嘻,其實這也不是小穎自己想出來的,是借鑒別人畫的,小穎自己也敲了下,稍微做了些改動哈哈哈哈。

 

      有沒有想起兒時的看動畫片的場景啊,記得小時候每次動畫片開始之前都會放這首《大風車》歌曲,哈哈哈,有興趣的親們可以去下載聽聽回一下兒時的美好,那這個到底是怎么實現的呢?在上代碼之前大家先去普及下css3中:animation、background: linear-gradient()、transparent屬性。

重點來啦!!!!!當當當當!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css畫大風車</title>
    <style type="text/css">
    .wrap {
        width: 320px;
        height: 320px;
        position: absolute;
        animation: rotate 2s linear infinite;
        /* animation: name duration timing-function delay iteration-count direction;
         rotate   name              動畫名字
         2s       duration          規定完成動畫所花費的時間,以秒或毫秒計。   
         linear   timing-function   規定動畫的速度曲線,動畫從頭到尾的速度是相同的。
         infinite iteration-count   規定動畫應該播放的次數,規定動畫應該無限次播放。*/
    }

    .box1,
    .box2,
    .box3,
    .box4 {
        width: 160px;
        height: 160px;
        position: absolute;
    }

    .box1 {
        left: 80px;
        background: linear-gradient(to right, #00ced1 50%, transparent 50%);
        border-radius: 80px 0 0 80px;
    }

    .box2 {
        right: 0;
        background: linear-gradient(to bottom, #ff4500 50%, transparent 50%);
        border-radius: 80px 80px 0 0;
        top: 80px;
    }

    .box3 {
        left: 80px;
        background: linear-gradient(to left, #ffc0cb 50%, transparent 50%);
        border-radius: 0 80px 80px 0;
        top: 160px;
    }

    .box4 {
        top: 80px;
        background: linear-gradient(to top, #d4dc14 50%, transparent 50%);
        border-radius: 0 0 80px 80px;
    }

    .gunzi {
        width: 20px;
        height: 260px;
        background: black;
        position: absolute;
        z-index: -1;
        top: 168px;
        left: 160px;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    </style>
</head>

<body>
    <div class='Windmill-centent'>
        <div class="wrap">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
        <div class="gunzi"></div>
    </div>
</body>

</html>

 git地址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM