CSS3实现一个小风车【纯DOM+CSS3】

16-08-10 来源：[db:作者]

收藏我要投稿

前言

用CSS3实现了一个小风车的效果。。。转转转，挺简单。。

效果

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小风车-转啊转</title>
    <style type="text/css">
    html {
        font-size: 10px;
    }

    html * {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    .windmill {
        width: 25rem;
        min-height: 30rem;
        height: auto;
        margin: 3rem auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    /* 头部 */

    .windmill-head {
        height: 20rem;
        width: 20rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        -webkit-align-content: space-around;
            -ms-flex-line-pack: distribute;
                align-content: space-around;
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        -webkit-animation: rotate-windmill 1s linear infinite;
                animation: rotate-windmill 1s linear infinite;
        border-radius: 50%;
        border: 0.1rem solid #DBE526;
        -webkit-transition: border-radius 2s linear;
        transition: border-radius 2s linear;
    }
    /* 两片叶子的包裹层 */

    .wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        height: 135%;
        width: 50%;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    /* 包裹层对称 */

    .wrapper1 {
        -webkit-transform: rotate(-45deg) translate(5rem);
                transform: rotate(-45deg) translate(5rem);
        -webkit-transform-origin: right center;
                transform-origin: right center;
    }

    .wrapper2 {
        -webkit-transform: rotate(45deg) translate(-5rem);
                transform: rotate(45deg) translate(-5rem);
        -webkit-transform-origin: left center;
                transform-origin: left center;
    }
    /* 扇叶的形状及底色 */

    .leaf {
        height: 13rem;
        width: 5rem;
        border-radius: 5rem/ 5rem 5rem 20rem 20rem;
        -webkit-box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);
                box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);
    }

    .leaf1 {
        border: 0.05rem solid #D1A23A;
        -webkit-transform: rotate(0deg) translate(0);
                transform: rotate(0deg) translate(0);
        background-color: rgba(230, 0, 100, 5);
        background: -webkit-gradient(linear, left top, left bottom, from(#D02CE4), to(#f5f5f5));
        background: -webkit-linear-gradient(top, #D02CE4, #f5f5f5);
        background: linear-gradient(180deg, #D02CE4, #f5f5f5);
        -webkit-transition: background 2s linear;
        transition: background 2s linear;
    }

    .leaf2 {
        border: 0.05rem solid #49D13A;
        background-color: rgba(230, 0, 150, 5);
        -webkit-transform: rotate(-180deg) translate(0);
                transform: rotate(-180deg) translate(0);
        background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));
        background: -webkit-linear-gradient(top, #B91717, #f5f5f5);
        background: linear-gradient(180deg, #B91717, #f5f5f5);
        -webkit-transition: background 2s linear 2s;
        transition: background 2s linear 2s;
    }

    .leaf3 {
        border: 0.05rem solid #C6079D;
        background-color: rgba(130, 0, 100, 5);
        -webkit-transform: rotate(0deg) translate(0);
                transform: rotate(0deg) translate(0);
        background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));
        background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5);
        background: linear-gradient(180deg, #1CBA9F, #f5f5f5);
        -webkit-transition: background 2s linear;
        transition: background 2s linear;
        -webkit-transition: background 2s linear 4s;
        transition: background 2s linear 4s;
    }

    .leaf4 {
        border: 0.05rem solid #3A5FD1;
        background-color: rgba(230, 100, 100, 5);
        -webkit-transform: rotate(-180deg) translate(0);
                transform: rotate(-180deg) translate(0);
        background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));
        background: -webkit-linear-gradient(top, #335642, #f5f5f5);
        background: linear-gradient(180deg, #335642, #f5f5f5);
        -webkit-transition: background 2s linear 6s;
        transition: background 2s linear 6s;
    }
    /* 尾部 */

    .windmill-pillar {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        width: 3rem;
        height: 20rem;
        background: #FFF;
        -webkit-transform: translateY(-52%);
                transform: translateY(-52%);
        position: relative;
        z-index: -2;
        border-radius: 50% 50% 0 0;
        -webkit-animation: cd 2s linear infinite;
                animation: cd 2s linear infinite;
    }

    @-webkit-keyframes rotate-windmill {
        0% {
            -webkit-transform: rotate(0);
                    transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }

    @keyframes rotate-windmill {
        0% {
            -webkit-transform: rotate(0);
                    transform: rotate(0);
        }
        100% {
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }

    @-webkit-keyframes cd {
        0% {
            background: #F5F5F5;
        }
        50% {
            background: #E1CB82;
        }
        75% {
            background: #F1F358;
        }
        100% {
            background: #FFFC00;
        }
    }

    @keyframes cd {
        0% {
            background: #F5F5F5;
        }
        50% {
            background: #E1CB82;
        }
        75% {
            background: #F1F358;
        }
        100% {
            background: #FFFC00;
        }
    }
    </style>
</head>

<body>
    <div class="windmill">
        <div class="windmill-head">
            <div class="wrapper wrapper1">
                <div class="leaf leaf1"></div>
                <div class="leaf leaf2"></div>
            </div>
            <div class="wrapper wrapper2">
                <div class="leaf leaf3"></div>
                <div class="leaf leaf4"></div>
            </div>
        </div>
        <div class="windmill-pillar"></div>
    </div>
</body>

</html>

点击复制链接与好友分享!回本站首页