css实现加载动画效果

最新推荐文章于 2024-03-20 17:18:51 发布

顾鸟

最新推荐文章于 2024-03-20 17:18:51 发布

阅读量219

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40881695/article/details/112854438

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 效果如下

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>loading-animate</title>
  <style>
    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(75deg);
      width: 15px;
      height: 15px;
    }

    .loading::before,
    .loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 15px;
      border-radius: 15px;
      animation: loading 1.5s infinite linear;
    }

    .loading::before {
      /* 相对于.loading偏移15px */
      box-shadow: 15px 15px #ef5b9c, -15px -15px #f47920;
    }

    .loading::after {
      box-shadow: 15px 15px #5c7a29, -15px -15px #009ad6;
      /* 使用transform调整::after的位置 */
      transform: translate(-50%, -50%) rotate(90deg);

    }

    @keyframes loading {
      50% {
        width: 45px;
      }
    }
  </style>
</head>

<body>
  <div class="loading"></div>
</body>

</html>

转载至：https://www.bilibili.com/video/BV1m7411Y76c

顾鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现加载动画效果

1. 效果如下代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>loading-animate</title> <style> .loading { position: absolute; top: 50%; left: 50%; transform: translate(-5
复制链接

扫一扫