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地址

posted @ 2017-11-01 21:35  爱喝酸奶的吃货  阅读(2443)  评论(0)  编辑  收藏  举报