css3

关注公众号 jb51net

关闭
网页制作 > CSS > css3 >

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

crper

用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>  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。