【开发小技巧】028—使用CSS创建卡通动画加载效果

在实际项目开发中，一般都会设计一个动画加载效果，今天这个加载效果非常有趣，可以帮助用户在等待程序加载时，缓解用户着急的情绪。

HTML代码：在本文中，设计了代码的基本结构。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Animated loader</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <div class="pieces"></div> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="eye"></div> 
    <p>GeeksforGeeks loading...</p> 
</body> 

</html>

CSS代码：在本文中，卡通加载器的设计是使用CSS属性实现的。

通过逐渐从一组样式更改为另一组样式来创建动画。更改以百分比或关键字“ from”和“ to”为单位，分别与0％和100％相同。

我们可以根据需要多次更改CSS样式集。

句法：

@keyframes animationname {keyframes-selector {css-styles;}}

body{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    background: #202020; 

} 
.pieces{ 
    padding: 10px; 
    border-radius: 50%; 
    background: #ffcc00; 
    position: absolute; 
    right: 40%; 
    animation: pieces 1s linear infinite; 
} 
.one{ 
    position: absolute; 
    top: 50.5%; 
    left: 30%; 
    background: yellowgreen; 
    border-radius: 0 0 125px 125px; 
    height: 125px; 
    width: 250px; 
    animation: anim1 1s linear infinite; 
} 
.two{ 
    position: absolute; 
    top: 36.5%; 
    left: 30%; 
    background: yellowgreen; 
    border-radius: 125px 125px 0 0; 
    height: 125px; 
    width: 250px; 
    animation: anim2 1s linear infinite; 
} 
.eye{ 
    position: absolute; 
    right: 60%; 
    top: 40%; 
    background: #202020; 
    padding: 12px; 
    border-radius: 50%; 
    animation: eye 1s linear infinite; 
} 
p{ 
    position: absolute; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 25px; 
    letter-spacing: 2px; 
    top: 53%; 
    right: 30%; 
    font-family: arial; 
    color: green; 
} 
@keyframes anim1{ 
    0%{ 
        transform: rotate(0deg); 
    } 
    50%{ 
        transform: rotate(20deg); 
    } 
    100%{ 
        transform: rotate(0deg); 
    } 
} 
@keyframes anim2{ 
    0%{ 
        transform: rotate(0deg); 
    } 
    50%{ 
        transform: rotate(-20deg); 
    } 
    100%{ 
        transform: rotate(0deg); 
    } 
} 
@keyframes eye{ 
    0%{ 
        top: 40%; 
        right: 60%; 
    } 
    50%{ 
        top: 40.3%; 
        right: 60.3%; 
    } 
    100%{ 
        top: 40%; 
        right: 60%; 
    } 
} 
@keyframes pieces{ 
    0%{ 
        right: 40%; 
    } 
    100%{ 
        right: 60%; 
    } 
}

完整代码：这是以上两个代码部分的组合。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content= 
    "width=device-width, initial-scale=1.0">       
  <title>Animated loader</title> 

  <style> 
    body { 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      min-height: 100vh; 
      background: #202020; 

    } 

    .pieces { 
      padding: 10px; 
      border-radius: 50%; 
      background: #ffcc00; 
      position: absolute; 
      right: 40%; 
      animation: pieces 1s linear infinite; 
    } 

    .one { 
      position: absolute; 
      top: 50.5%; 
      left: 30%; 
      background: yellowgreen; 
      border-radius: 0 0 125px 125px; 
      height: 125px; 
      width: 250px; 
      animation: anim1 1s linear infinite; 
    } 

    .two { 
      position: absolute; 
      top: 36.5%; 
      left: 30%; 
      background: yellowgreen; 
      border-radius: 125px 125px 0 0; 
      height: 125px; 
      width: 250px; 
      animation: anim2 1s linear infinite; 
    } 

    .eye { 
      position: absolute; 
      right: 60%; 
      top: 40%; 
      background: #202020; 
      padding: 12px; 
      border-radius: 50%; 
      animation: eye 1s linear infinite; 
    } 

    p { 
      position: absolute; 
      font-weight: bold; 
      text-transform: uppercase; 
      font-size: 25px; 
      letter-spacing: 2px; 
      top: 53%; 
      right: 30%; 
      font-family: arial; 
      color: green; 
    } 

    @keyframes anim1 { 
      0% { 
        transform: rotate(0deg); 
      } 

      50% { 
        transform: rotate(20deg); 
      } 

      100% { 
        transform: rotate(0deg); 
      } 
    } 

    @keyframes anim2 { 
      0% { 
        transform: rotate(0deg); 
      } 

      50% { 
        transform: rotate(-20deg); 
      } 

      100% { 
        transform: rotate(0deg); 
      } 
    } 

    @keyframes eye { 
      0% { 
        top: 40%; 
        right: 60%; 
      } 

      50% { 
        top: 40.3%; 
        right: 60.3%; 
      } 

      100% { 
        top: 40%; 
        right: 60%; 
      } 
    } 

    @keyframes pieces { 
      0% { 
        right: 40%; 
      } 

      100% { 
        right: 60%; 
      } 
    } 
</style> 
</head> 

<body> 
  <div class="pieces"></div> 
  <div class="one"></div> 
  <div class="two"></div> 
  <div class="eye"></div> 

  <p>GeeksforGeeks loading...</p> 
</body> 

</html>

最终效果如下：

【开发小技巧】028—使用CSS创建卡通动画加载效果

本文完~

【开发小技巧】028—使用CSS创建卡通动画加载效果

秒客网

【开发小技巧】028—使用CSS创建卡通动画加载效果

相关文章