首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

纯DOM+CSS3实现简单的小风车动画

Posted in HTML / CSS onSeptember 27, 2016

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

效果

纯DOM+CSS3实现简单的小风车动画

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>小风车-转啊转</title>  
  7.     <style type="text/css">  
  8.     html {   
  9.         font-size: 10px;   
  10.     }   
  11.   
  12.     html * {   
  13.         -webkit-box-sizing: border-box;   
  14.                 box-sizing: border-box;   
  15.     }   
  16.   
  17.     .windmill {   
  18.         width: 25rem;   
  19.         min-height: 30rem;   
  20.         height: auto;   
  21.         margin: 3rem auto;   
  22.         display: -webkit-box;   
  23.         display: -webkit-flex;   
  24.         display: -ms-flexbox;   
  25.         display: flex;   
  26.         -webkit-box-orient: vertical;   
  27.         -webkit-box-direction: normal;   
  28.         -webkit-flex-direction: column;   
  29.             -ms-flex-direction: column;   
  30.                 flex-direction: column;   
  31.         -webkit-box-pack: start;   
  32.         -webkit-justify-content: flex-start;   
  33.             -ms-flex-pack: start;   
  34.                 justify-content: flex-start;   
  35.         -webkit-box-align: center;   
  36.         -webkit-align-items: center;   
  37.             -ms-flex-align: center;   
  38.                 align-items: center;   
  39.     }   
  40.     /* 头部 */   
  41.   
  42.     .windmill-head {   
  43.         height: 20rem;   
  44.         width: 20rem;   
  45.         display: -webkit-box;   
  46.         display: -webkit-flex;   
  47.         display: -ms-flexbox;   
  48.         display: flex;   
  49.         -webkit-box-orient: horizontal;   
  50.         -webkit-box-direction: normal;   
  51.         -webkit-flex-direction: row;   
  52.             -ms-flex-direction: row;   
  53.                 flex-direction: row;   
  54.         -webkit-flex-wrap: wrap;   
  55.             -ms-flex-wrap: wrap;   
  56.                 flex-wrap: wrap;   
  57.         -webkit-justify-content: space-around;   
  58.             -ms-flex-pack: distribute;   
  59.                 justify-content: space-around;   
  60.         -webkit-align-content: space-around;   
  61.             -ms-flex-line-pack: distribute;   
  62.                 align-content: space-around;   
  63.         -webkit-transform: translateZ(0);   
  64.                 transform: translateZ(0);   
  65.         -webkit-animation: rotate-windmill 1s linear infinite;   
  66.                 animation: rotate-windmill 1s linear infinite;   
  67.         border-radius: 50%;   
  68.         border: 0.1rem solid #DBE526;   
  69.         -webkit-transition: border-radius 2s linear;   
  70.         transition: border-radius 2s linear;   
  71.     }   
  72.     /* 两片叶子的包裹层 */   
  73.   
  74.     .wrapper {   
  75.         display: -webkit-box;   
  76.         display: -webkit-flex;   
  77.         display: -ms-flexbox;   
  78.         display: flex;   
  79.         -webkit-box-orient: vertical;   
  80.         -webkit-box-direction: normal;   
  81.         -webkit-flex-direction: column;   
  82.             -ms-flex-direction: column;   
  83.                 flex-direction: column;   
  84.         -webkit-flex-wrap: wrap;   
  85.             -ms-flex-wrap: wrap;   
  86.                 flex-wrap: wrap;   
  87.         -webkit-box-pack: justify;   
  88.         -webkit-justify-content: space-between;   
  89.             -ms-flex-pack: justify;   
  90.                 justify-content: space-between;   
  91.         height: 135%;   
  92.         width: 50%;   
  93.         -webkit-box-align: center;   
  94.         -webkit-align-items: center;   
  95.             -ms-flex-align: center;   
  96.                 align-items: center;   
  97.     }   
  98.     /* 包裹层对称 */   
  99.   
  100.     .wrapper1 {   
  101.         -webkit-transform: rotate(-45deg) translate(5rem);   
  102.                 transform: rotate(-45deg) translate(5rem);   
  103.         -webkit-transform-origin: right center;   
  104.                 transform-origin: right center;   
  105.     }   
  106.   
  107.     .wrapper2 {   
  108.         -webkit-transform: rotate(45deg) translate(-5rem);   
  109.                 transform: rotate(45deg) translate(-5rem);   
  110.         -webkit-transform-origin: left center;   
  111.                 transform-origin: left center;   
  112.     }   
  113.     /* 扇叶的形状及底色 */   
  114.   
  115.     .leaf {   
  116.         height: 13rem;   
  117.         width: 5rem;   
  118.         border-radius: 5rem/ 5rem 5rem 20rem 20rem;   
  119.         -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);   
  120.                 box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);   
  121.     }   
  122.   
  123.     .leaf1 {   
  124.         border: 0.05rem solid #D1A23A;   
  125.         -webkit-transform: rotate(0deg) translate(0);   
  126.                 transform: rotate(0deg) translate(0);   
  127.         background-color: rgba(230, 0, 100, 5);   
  128.         background: -webkit-gradient(linear, left top, left bottom, from(#D02CE4), to(#f5f5f5));   
  129.         background: -webkit-linear-gradient(top, #D02CE4, #f5f5f5);   
  130.         background: linear-gradient(180deg, #D02CE4, #f5f5f5);   
  131.         -webkit-transition: background 2s linear;   
  132.         transition: background 2s linear;   
  133.     }   
  134.   
  135.     .leaf2 {   
  136.         border: 0.05rem solid #49D13A;   
  137.         background-color: rgba(230, 0, 150, 5);   
  138.         -webkit-transform: rotate(-180deg) translate(0);   
  139.                 transform: rotate(-180deg) translate(0);   
  140.         background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));   
  141.         background: -webkit-linear-gradient(top, #B91717, #f5f5f5);   
  142.         background: linear-gradient(180deg, #B91717, #f5f5f5);   
  143.         -webkit-transition: background 2s linear 2s;   
  144.         transition: background 2s linear 2s;   
  145.     }   
  146.   
  147.     .leaf3 {   
  148.         border: 0.05rem solid #C6079D;   
  149.         background-color: rgba(130, 0, 100, 5);   
  150.         -webkit-transform: rotate(0deg) translate(0);   
  151.                 transform: rotate(0deg) translate(0);   
  152.         background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));   
  153.         background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5);   
  154.         background: linear-gradient(180deg, #1CBA9F, #f5f5f5);   
  155.         -webkit-transition: background 2s linear;   
  156.         transition: background 2s linear;   
  157.         -webkit-transition: background 2s linear 4s;   
  158.         transition: background 2s linear 4s;   
  159.     }   
  160.   
  161.     .leaf4 {   
  162.         border: 0.05rem solid #3A5FD1;   
  163.         background-color: rgba(230, 100, 100, 5);   
  164.         -webkit-transform: rotate(-180deg) translate(0);   
  165.                 transform: rotate(-180deg) translate(0);   
  166.         background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));   
  167.         background: -webkit-linear-gradient(top, #335642, #f5f5f5);   
  168.         background: linear-gradient(180deg, #335642, #f5f5f5);   
  169.         -webkit-transition: background 2s linear 6s;   
  170.         transition: background 2s linear 6s;   
  171.     }   
  172.     /* 尾部 */   
  173.   
  174.     .windmill-pillar {   
  175.         -webkit-transform: translateZ(0);   
  176.                 transform: translateZ(0);   
  177.         width: 3rem;   
  178.         height: 20rem;   
  179.         background: #FFF;   
  180.         -webkit-transform: translateY(-52%);   
  181.                 transform: translateY(-52%);   
  182.         position: relative;   
  183.         z-index: -2;   
  184.         border-radius: 50% 50% 0 0;   
  185.         -webkit-animation: cd 2s linear infinite;   
  186.                 animation: cd 2s linear infinite;   
  187.     }   
  188.   
  189.     @-webkit-keyframes rotate-windmill {   
  190.         0% {   
  191.             -webkit-transform: rotate(0);   
  192.                     transform: rotate(0);   
  193.         }   
  194.         100% {   
  195.             -webkit-transform: rotate(360deg);   
  196.                     transform: rotate(360deg);   
  197.         }   
  198.     }   
  199.   
  200.     @keyframes rotate-windmill {   
  201.         0% {   
  202.             -webkit-transform: rotate(0);   
  203.                     transform: rotate(0);   
  204.         }   
  205.         100% {   
  206.             -webkit-transform: rotate(360deg);   
  207.                     transform: rotate(360deg);   
  208.         }   
  209.     }   
  210.   
  211.     @-webkit-keyframes cd {   
  212.         0% {   
  213.             background: #F5F5F5;   
  214.         }   
  215.         50% {   
  216.             background: #E1CB82;   
  217.         }   
  218.         75% {   
  219.             background: #F1F358;   
  220.         }   
  221.         100% {   
  222.             background: #FFFC00;   
  223.         }   
  224.     }   
  225.   
  226.     @keyframes cd {   
  227.         0% {   
  228.             background: #F5F5F5;   
  229.         }   
  230.         50% {   
  231.             background: #E1CB82;   
  232.         }   
  233.         75% {   
  234.             background: #F1F358;   
  235.         }   
  236.         100% {   
  237.             background: #FFFC00;   
  238.         }   
  239.     }   
  240.     </style>  
  241. </head>  
  242.   
  243. <body>  
  244.     <div class="windmill">  
  245.         <div class="windmill-head">  
  246.             <div class="wrapper wrapper1">  
  247.                 <div class="leaf leaf1"></div>  
  248.                 <div class="leaf leaf2"></div>  
  249.             </div>  
  250.             <div class="wrapper wrapper2">  
  251.                 <div class="leaf leaf3"></div>  
  252.                 <div class="leaf leaf4"></div>  
  253.             </div>  
  254.         </div>  
  255.         <div class="windmill-pillar"></div>  
  256.     </div>  
  257. </body>  
  258.   
  259. </html>  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

纯DOM+CSS3实现简单的小风车动画

- Author -

crper

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 #HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 #HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 #HTML / CSS
CSS3 3D立方体效果示例－transform也不过如此
Dec 05 #HTML / CSS
前端制作动画的几种方式（css3，js）
Dec 12 #HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
路由(1) 单向链表(1) 接口(1) 驱动模型(1) 抽象类(1) 乱码(3) 扫雷(1) router(1) Date(1) Scheduled(1)
You might like
php中的strpos使用示例
2014/02/27 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现比较文件内容异同
2018/06/22 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python接口开发实现步骤详解
2020/04/26 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
阿玛尼美国官方网站：Armani.com
2016/11/25 全球购物
SteelSeries赛睿官网：游戏外设和配件的领先制造商（耳机、键盘、鼠标和鼠标垫）
2018/06/17 全球购物
Intersport西班牙：在线体育商店
2019/11/06 全球购物
Java面向对象面试题
2016/12/26 面试题
自我评价优秀范文分享
2013/11/30 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
小学生评语大全
2014/04/18 职场文书
技能比武方案
2014/05/21 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2015年教师节感言
2015/08/03 职场文书
青年教师听课心得体会
2016/01/15 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS