[分享]css动画由大到小的圈

发布于 2024-11-11 14:38:25

在网页设计中，动画效果可以增加用户与网站的互动性和趣味性。本文将介绍如何使用 CSS 做出由大到小的圈动画效果。首先，我们要创建一个 div 元素，并添加一个 id 名称。然后在 CSS 中设置宽度和...

在网页设计中，动画效果可以增加用户与网站的互动性和趣味性。本文将介绍如何使用 CSS 做出由大到小的圈动画效果。

首先，我们要创建一个 div 元素，并添加一个 id 名称。然后在 CSS 中设置宽度和高度，并将边框设置为圆形。

  <div id="circle"></div>   #circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

接着，我们要为这个圆添加动画效果。我们需要设置从大到小的关键帧，并在关键帧之间设置圆的大小变化。在 CSS 中添加以下代码：

  @keyframes zoomInOut {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(2);
      }
      100% {
        transform: scale(1);
      }
    }
    #circle {
      animation: zoomInOut 3s infinite;
    }

最后，我们将设置好的 div 元素添加到 HTML 文件中，就可以看到由大到小的圆动画效果了。

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Circle Animation</title>
      <style>
        #circle {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          animation: zoomInOut 3s infinite;
        }
        @keyframes zoomInOut {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(2);
          }
          100% {
            transform: scale(1);
          }
        }
      </style>
    </head>
    <body>
      <div id="circle"></div>
    </body>
    </html>

这就是制作由大到小的圆动画效果的全部过程，希望本文对大家有所帮助！

css 教程