今天用css3的写了一个会动的大风车，使用translate和rotate布局，使用animation制作动画效果；分享给大家

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        body,html{

            width: 100%;

            height: 100%;

            overflow:hidden;

        }

        @keyframes move{

            from{

                transform:rotate(0deg);

            }

            to{

                transform:rotate(360deg);

            }

        }

        #box{

            width:200px;

            height:200px;

            margin:100px auto;

            position:relative;

            -webkit-animation:4s move linear infinite running;

        }

        #box div{

            width: 100px;

            height: 50px;

            border-radius:0 0 50px 50px;

            -webkit-transform-origin:right center;

            position:absolute;

        }

        .red{

            background:-webkit-radial-gradient(right,circle,red,#000);

            transform:translateX(100px) translateY(100px);

        }

        .yellow{

            background:-webkit-radial-gradient(right,circle,yellow,#000);

            transform:translateX(-25px) translateY(175px) rotateZ(90deg);

        }

        .blue{

            background:-webkit-radial-gradient(right,circle,blue,#000);

            transform:translateX(-100px) translateY(50px) rotateZ(180deg);

        }

        .green{

            background:-webkit-radial-gradient(right,circle,green,#000);

            transform:translateX(25px) translateY(-25px) rotateZ(-90deg);

        }

        #box .dot{

            width: 20px;

            height: 20px;

            background:-webkit-radial-gradient(rgba(255,255,255,1),rgba(0,0,0,1));

            border-radius:50%;

            top:50%;

            left:50%;

            margin:-10px 0 0 -10px;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="red"></div>

        <div class="yellow"></div>

        <div class="blue"></div>

        <div class="green"></div>

        <div class="dot"></div>

    </div>

</body>

</html>

　　

会动的大风车（css3）的更多相关文章

  1. AOS – 另外一个独特的页面滚动动画库（CSS3）

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  4. UC~移动端的IE！！！坑总结

    1.接入过WAP版支付宝支付的应该会发现,支付宝页面在UC中巨丑,完全就是诺基亚时代的网页.你可能会怪它是支付宝的问题吧.但你用QQ浏览器打开,很好啊:你在电脑用火狐.Chrome打开都很好啊:那你试 ...

  5. 67 个JavaScript和CSS实用工具、库与资源

    在这篇文章中,我不会与大家谈论大型的前端框架,如 React.Angular.Vue 等,也没有涉及那些流行的代码编辑器,如 Atom.VS Code.Sublime,我只想与大家分享一个有助于提升开 ...

  6. JavaScript和CSS实用工具、库与资源

    JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js  - 用于在网页上创建 3 ...

  7. javaScript基础--概念以及使用

    1.什么javascript? 为什么要学习? 处理网站动态特效 为后期课程打基础 什么是javascript? 是一个客户端的具有安全性的脚本语言. js和h5 的关系 :  都是向静态的元素动起来 ...

  8. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. SAP数据更新的触发

    SAP 应用系统架构         应用层运行着DIALOG进程,每个DIALOG进程绑定一个数据库进程,DIALOG进程与GUI进行通信,每次GUI向应用服务器发送请求时都会通过dispatche ...

  2. 关于SAP的视图类型

    1 sap的视图的类型sap的视图的类型有五种 Database views (数据库视图):和数据库的视图形同,连接条件是必须自定义. Projection views(投影视图): 用于屏蔽一些字 ...

  3. 桥牌笔记L4D17：小心阻塞

    南打3NT. 西的首攻会有3墩黑桃.3墩方块.2付梅花,共8墩到手.看来方块如果3-2分布的话,非常容易就能超一完成. 所以要想着4-1分布的安全打法. 第一墩庄家拿了黑桃J后,明手的黑桃A会阻塞,庄 ...

  4. Python基础（1）--Python编程习惯与特点

    1.代码风格 在Python中,每行程序以换行符代表结束,如果一行程序太长的话,可以用“\”符号扩展到下一行.在python中以三引号(""")括起来的字符串,列表,元组 ...

  5. 【转】self.myOutlet=nil、viewDidUnload、dealloc的本质剖析

    对于iphone开发人员来说,内存管理是极为重要的技巧,哪怕程序的功能再强大,设计再漂亮,如果内存控制不好,也难逃程序莫名退出的噩运,这与网页开发是完全不同的. 内存控制里面有很多门道,在这里分析一下 ...

  6. IOS开发中NSRunloop跟NSTimer的问题

    在Windows时代,大家肯定对SendMessage,PostMessage,GetMessage有所了解,这些都是windows中的消息处理函数,那对应在ios中是什么呢,其实就是NSRunloo ...

  7. Git学习 --> 个人常用命令add,commit以及push

    Git命令行配置1 安装Github2 安装msysgit3 要配置用户名和油箱  git config --global user.name <用户名> 我的命令就是:git confi ...

  8. IntelliJ IDEA 2016.2.4下载与注册码

    下载地址 https://download.jetbrains.8686c.com/idea/ideaIU-2016.2.4.dmg 注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOi ...

  9. 关于git

    一.Git基础教程  01.[入门练习]廖雪峰 git教程网:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8 ...

  10. 双系统如何删除Linux，恢复Windows从MBR引导启动？

    嗯,现在愿意尝试Linux的人越来越多了.通常,如果一台电脑里已经装有了Windows,再装Linux,安装时,Linux的grub引导程 序就会覆盖掉保存在MBR当中的原来的Windows引导程序. ...