前端动画案例分享 (二)

chen序员

于 2024-09-29 10:28:09 发布

阅读量217

点赞数 15

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/m0_55472195/article/details/142629316

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .wave-loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .wave {
      width: 80px;
      height: 80px;
      background-color: #ff6b6b;
      border-radius: 50%;
      position: relative;
      animation: waveMove 1.5s infinite linear;
    }

    .wave:before, .wave:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(255, 107, 107, 0.4);
      animation: waveExpand 1.5s infinite linear;
    }

    .wave:after {
      background-color: rgba(255, 107, 107, 0.2);
      animation-delay: 0.5s;
    }

    @keyframes waveMove {
      0%, 100% { transform: rotate(0); }
      50% { transform: rotate(360deg); }
    }

    @keyframes waveExpand {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.5); opacity: 0; }
    }
  </style>
</head>
<body>
  <div class="wave-loader">
    <div class="wave"></div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .swirl-loader {
      width: 50px;
      height: 50px;
      border: 5px solid transparent;
      border-top: 5px solid #ff6b6b;
      border-bottom: 5px solid #f5576c;
      border-radius: 50%;
      animation: swirlSpin 1s infinite linear;
    }

    @keyframes swirlSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="swirl-loader"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .cube-loader {
      display: inline-block;
      transform: perspective(120px) rotateX(45deg) rotateY(45deg);
      animation: spinCube 3s infinite linear;
    }

    .cube {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: #ff6b6b;
      animation: cubeColors 3s infinite ease-in-out;
    }

    @keyframes cubeColors {
      0%, 100% { background-color: #ff6b6b; }
      25% { background-color: #f093fb; }
      50% { background-color: #f5576c; }
      75% { background-color: #ffcb57; }
    }

    @keyframes spinCube {
      0% { transform: rotateX(0deg) rotateY(0deg); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="cube-loader">
    <div class="cube"></div>
  </div>
</body>
</html>

想要获取更多特效，点击免费使用小奈AI