css3 div跳动动画_「CSS」制作加载中动画（一）

最新推荐文章于 2024-07-16 15:32:05 发布

呆呆小逗比

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量284

点赞数

文章标签： css3 div跳动动画

本文链接：https://blog.csdn.net/weixin_42406647/article/details/112200856

版权

本文介绍如何利用CSS3创建一个div元素的跳动加载动画，提供预览效果和完整代码示例。

摘要由CSDN通过智能技术生成

简介

使用 CSS3 制作一个简单的加载中动画。

预览

原理

<div class="spin"></div>

完整代码

index.html：

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

<head>
  <title>Spin</title>
  <style>
    .spin {
      width: 50px;
      height: 50px;
      border: 3px solid #D0D3D4;
      border-top-color: #626567;
      border-radius: 50%;
      animation: spin 1.5s linear infinite;
    }

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

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

以后可能会更新其他加载效果动画