CSS 卡通动画

HTML代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  4. <head> 
  5.     <meta charset="UTF-8"> 
  6.     <meta name="viewport" content= 
  7.         "width=device-width, initial-scale=1.0"> 
  8.     <title>Animated loader</title> 
  9.     <link rel="stylesheet" href="style.css"> 
  10. </head> 
  12. <body> 
  13.     <div class="pieces"></div> 
  14.     <div class="one"></div> 
  15.     <div class="two"></div> 
  16.     <div class="eye"></div> 
  17.     <p>GeeksforGeeks loading...</p> 
  18. </body> 
  20. </html>

CSS代码

卡通加载器的设计是通过CSS属性实现的。
通过逐渐从一组样式更改为另一组样式来创建动画。更改以百分比或关键字“ from”和“ to”为单位，分别与0％和100％相同。
可以根据需要多次更改CSS样式集。

  1. @keyframes animationname {keyframes-selector {css-styles;}}
  1. body{ 
  2.     display: flex; 
  3.     justify-content: center; 
  4.     align-items: center; 
  5.     min-height: 100vh; 
  6.     background: #202020; 
  8. } 
  9. .pieces{ 
  10.     padding: 10px; 
  11.     border-radius: 50%; 
  12.     background: #ffcc00; 
  13.     position: absolute; 
  14.     right: 40%; 
  15.     animation: pieces 1s linear infinite; 
  16. } 
  17. .one{ 
  18.     position: absolute; 
  19.     top: 50.5%; 
  20.     left: 30%; 
  21.     background: yellowgreen; 
  22.     border-radius: 0 0 125px 125px; 
  23.     height: 125px; 
  24.     width: 250px; 
  25.     animation: anim1 1s linear infinite; 
  26. } 
  27. .two{ 
  28.     position: absolute; 
  29.     top: 36.5%; 
  30.     left: 30%; 
  31.     background: yellowgreen; 
  32.     border-radius: 125px 125px 0 0; 
  33.     height: 125px; 
  34.     width: 250px; 
  35.     animation: anim2 1s linear infinite; 
  36. } 
  37. .eye{ 
  38.     position: absolute; 
  39.     right: 60%; 
  40.     top: 40%; 
  41.     background: #202020; 
  42.     padding: 12px; 
  43.     border-radius: 50%; 
  44.     animation: eye 1s linear infinite; 
  45. } 
  46. p{ 
  47.     position: absolute; 
  48.     font-weight: bold; 
  49.     text-transform: uppercase; 
  50.     font-size: 25px; 
  51.     letter-spacing: 2px; 
  52.     top: 53%; 
  53.     right: 30%; 
  54.     font-family: arial; 
  55.     color: green; 
  56. } 
  57. @keyframes anim1{ 
  58.     0%{ 
  59.         transform: rotate(0deg); 
  60.     } 
  61.     50%{ 
  62.         transform: rotate(20deg); 
  63.     } 
  64.     100%{ 
  65.         transform: rotate(0deg); 
  66.     } 
  67. } 
  68. @keyframes anim2{ 
  69.     0%{ 
  70.         transform: rotate(0deg); 
  71.     } 
  72.     50%{ 
  73.         transform: rotate(-20deg); 
  74.     } 
  75.     100%{ 
  76.         transform: rotate(0deg); 
  77.     } 
  78. } 
  79. @keyframes eye{ 
  80.     0%{ 
  81.         top: 40%; 
  82.         right: 60%; 
  83.     } 
  84.     50%{ 
  85.         top: 40.3%; 
  86.         right: 60.3%; 
  87.     } 
  88.     100%{ 
  89.         top: 40%; 
  90.         right: 60%; 
  91.     } 
  92. } 
  93. @keyframes pieces{ 
  94.     0%{ 
  95.         right: 40%; 
  96.     } 
  97.     100%{ 
  98.         right: 60%; 
  99.     } 
  100. }

完整代码

  2. <!DOCTYPE html> 
  3. <html lang="en"> 
  5. <head> 
  6.   <meta charset="UTF-8"> 
  7.   <meta name="viewport" content= 
  8.     "width=device-width, initial-scale=1.0">       
  9.   <title>Animated loader</title> 
  11.   <style> 
  12.     body { 
  13.       display: flex; 
  14.       justify-content: center; 
  15.       align-items: center; 
  16.       min-height: 100vh; 
  17.       background: #202020; 
  19.     } 
  21.     .pieces { 
  22.       padding: 10px; 
  23.       border-radius: 50%; 
  24.       background: #ffcc00; 
  25.       position: absolute; 
  26.       right: 40%; 
  27.       animation: pieces 1s linear infinite; 
  28.     } 
  30.     .one { 
  31.       position: absolute; 
  32.       top: 50.5%; 
  33.       left: 30%; 
  34.       background: yellowgreen; 
  35.       border-radius: 0 0 125px 125px; 
  36.       height: 125px; 
  37.       width: 250px; 
  38.       animation: anim1 1s linear infinite; 
  39.     } 
  41.     .two { 
  42.       position: absolute; 
  43.       top: 36.5%; 
  44.       left: 30%; 
  45.       background: yellowgreen; 
  46.       border-radius: 125px 125px 0 0; 
  47.       height: 125px; 
  48.       width: 250px; 
  49.       animation: anim2 1s linear infinite; 
  50.     } 
  52.     .eye { 
  53.       position: absolute; 
  54.       right: 60%; 
  55.       top: 40%; 
  56.       background: #202020; 
  57.       padding: 12px; 
  58.       border-radius: 50%; 
  59.       animation: eye 1s linear infinite; 
  60.     } 
  62.     p { 
  63.       position: absolute; 
  64.       font-weight: bold; 
  65.       text-transform: uppercase; 
  66.       font-size: 25px; 
  67.       letter-spacing: 2px; 
  68.       top: 53%; 
  69.       right: 30%; 
  70.       font-family: arial; 
  71.       color: green; 
  72.     } 
  74.     @keyframes anim1 { 
  75.       0% { 
  76.         transform: rotate(0deg); 
  77.       } 
  79.       50% { 
  80.         transform: rotate(20deg); 
  81.       } 
  83.       100% { 
  84.         transform: rotate(0deg); 
  85.       } 
  86.     } 
  88.     @keyframes anim2 { 
  89.       0% { 
  90.         transform: rotate(0deg); 
  91.       } 
  93.       50% { 
  94.         transform: rotate(-20deg); 
  95.       } 
  97.       100% { 
  98.         transform: rotate(0deg); 
  99.       } 
  100.     } 
  102.     @keyframes eye { 
  103.       0% { 
  104.         top: 40%; 
  105.         right: 60%; 
  106.       } 
  108.       50% { 
  109.         top: 40.3%; 
  110.         right: 60.3%; 
  111.       } 
  113.       100% { 
  114.         top: 40%; 
  115.         right: 60%; 
  116.       } 
  117.     } 
  119.     @keyframes pieces { 
  120.       0% { 
  121.         right: 40%; 
  122.       } 
  124.       100% { 
  125.         right: 60%; 
  126.       } 
  127.     } 
  128. </style> 
  129. </head> 
  131. <body> 
  132.   <div class="pieces"></div> 
  133.   <div class="one"></div> 
  134.   <div class="two"></div> 
  135.   <div class="eye"></div> 
  137.   <p>GeeksforGeeks loading...</p> 
  138. </body> 
  140. </html>

实现效果

GIF 2020-9-8-星期二 12-23-45.gif