css动画案例（附代码）

_耀北

于 2024-09-18 17:50:57 发布

阅读量607

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_72288930/article/details/142339619

版权

上一期（css动画-CSDN博客）讲述了css动画的基本，现在实现几个小案例

1. 圆形旋转加载动画

一个经典的旋转圆圈加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Animation</title>
  <style>
    .loader {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      margin: 100px auto;
    }

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

2. 点点加载动画

由三个点组成的加载动画，点点依次跳动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dot Loading Animation</title>
  <style>
    .dots {
      text-align: center;
    }

    .dot {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin: 3px;
      border-radius: 50%;
      background-color: #3498db;
      animation: bounce 1.4s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
  </style>
</head>
<body>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</body>
</html>

3. 条形加载动画

一个由条形组成的加载动画，条形依次从左到右移动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bar Loading Animation</title>
  <style>
    .bar-loader {
      display: flex;
      justify-content: space-between;
      width: 100px;
      margin: 100px auto;
    }

    .bar {
      width: 15px;
      height: 30px;
      background-color: #3498db;
      animation: bounce 1.5s infinite;
    }

    .bar:nth-child(2) {
      animation-delay: 0.3s;
    }

    .bar:nth-child(3) {
      animation-delay: 0.6s;
    }

    @keyframes bounce {
      0%, 100% {
        transform: scaleY(1);
      }
      50% {
        transform: scaleY(2);
      }
    }
  </style>
</head>
<body>
  <div class="bar-loader">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</body>
</html>

4. 渐变加载动画

一个带有渐变背景色的加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Loading Animation</title>
  <style>
    .gradient-loader {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(45deg, #ff0000, #0000ff);
      background-size: 200% 200%;
      animation: gradientShift 2s linear infinite;
      margin: 100px auto;
    }

    @keyframes gradientShift {
      0% { background-position: 0% 0%; }
      50% { background-position: 100% 100%; }
      100% { background-position: 0% 0%; }
    }
  </style>
</head>
<body>
  <div class="gradient-loader"></div>
</body>
</html>

总结

这些 CSS 动画示例展示了不同风格的加载效果，包括旋转、跳动、条形动画和渐变动画。你可以根据你的设计需求调整颜色、大小、动画时长等参数，以创建符合你应用风格的加载动画。