开心学习
当前位置：Web前端 > > 正文

html5+css3动画效果图（纯DOM+CSS3实现简单的小风车动画）

时间：2022-01-20 00:22:12类别：Web前端

html5+css3动画效果图

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

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

效果

html5+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.     <li class="windmill">  
    245.         <li class="windmill-head">  
    246.             <li class="wrapper wrapper1">  
    247.                 <li class="leaf leaf1"></li>  
    248.                 <li class="leaf leaf2"></li>  
    249.             </li>  
    250.             <li class="wrapper wrapper2">  
    251.                 <li class="leaf leaf3"></li>  
    252.                 <li class="leaf leaf4"></li>  
    253.             </li>  
    254.         </li>  
    255.         <li class="windmill-pillar"></li>  
    256.     </li>  
    257. </body>  
    258.   
    259. </html>  
    • 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。
    标签：
    风车 CSS3 dom
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习