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

前言

用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>
时间： 2024-10-13 23:00:14

CSS3实现一个小风车【纯DOM+CSS3】的相关文章

css3的一个小demo（箭头hover变化）

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 a{text-decoration: none; 7 color: #EE7A23;} 8 9 .select-self-area .select-btn .i-up-down { 10 wi

如何利用CSS3编写一个满屏的布局

如何利用CSS3编写一个满屏的布局 css3的出现能帮助我们更加轻松的实现各种想要的效果,例如写一个刚好满屏的布局,我们就可以利用CSS3的弹性盒模型来实现. 先来贴出html布局代码: 1 <%- include header %> 2 <div class="wrapper"> 3 <div id="appswall"> 4 <div class="adsapp-title"><butto

DOM+CSS3实现小游戏SwingCopters

前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加火爆那是后话了.不过我看了作者的宣传视频后,蠢蠢欲动,这么简单的小游戏我山寨一个网页版出来如何?简单思索一下,打算用DOM+CSS3来实现一个.一来强化一个下自己的CSS3知识,二来也探索下用原生DOM来做动画的性能到底如何. 三四天后,原作者的SwingCopters貌似没怎么火起来,看来flap

【推荐】纯CSS3画出小黄人并实现动画效果

前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣 前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

利用 CSS3 构建一个气泡对话框

这是一篇CSS3教程 http://www.maiziedu.com/course/228/,主要讲述在不使用图片的情况下如何使用CSS3 创建图像效果. 使用渐进增强的开发方式,因此一开始的界面只要拥有基本样式即可.基本的评论区界面样式如下: 现在我们来逐步完善这个博客的评论区域. word-wrap 当用户在评论区留下一长串的 URL 时,有可能会出现以下情况. 此时需要使用 word-wrap,使用 word-wrap 的原因是基于 Webkit 内核的浏览器以及 IE 在遇到"/&quo

用CSS3实现带小三角形的div框(不用图片)

用CSS3实现带小三角形的div框(不用图片) 现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移背景图片法,那么今天就不用图片,用CSS3实现一下,下面我们来看一下实现代码. 首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用 假如html代码是这样的 <div class="arrow-up">

使用CSS3 制作一个material-design 风格登录界面

使用CSS3 制作一个material-design 风格登录界面 心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计 在这个页面中,使用下面3点来完成响应式设计 最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px au

一款html5和css3实现的小机器人走路动画

之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. 在线预览   源码下载 实现的代码. html代码: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www