利用CSS变量计算制作一个炫酷的加载Looading...

最新推荐文章于 2025-04-08 15:54:06 发布

无糖气泡

最新推荐文章于 2025-04-08 15:54:06 发布

阅读量211

点赞数 1

分类专栏： css专栏文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_47969241/article/details/120757269

版权

css专栏专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何仅使用CSS和自定义变量来创建一个规律的转动加载动画，无需JavaScript。通过CSS的calc()方法计算延时，实现了各元素按顺序闪烁的效果，详细代码和解释帮助理解CSS在动画制作中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS作为前端及其重要的一部分，它的功能想必大多数人都明白，但是纵使这样，CSS中还有很多属性和方法是我们不经常用到的，CSS很强大，我们很有必要深入去了解一下。

制作一个转动的加载动画，其核心就在于规律的延时动画的执行，

让我们先看看效果吧

这样子的规律的排布与闪烁，其实并不需要用到JavaScript，利用CSS中自定义变量即可实现

我们可以JavaScript依次创建标签插入html内，只是用来节省，动画并不是利用JavaScript实现

<script>
      function crae(){
          let body = document.querySelector("body")
          for (let index = 0; index < 20; index++) {
             let spans = document.createElement("span")
             spans.className = "sp"
             body.appendChild(spans)
          }
      }
     crae()
     function yz(){
         let spans = document.getElementsByTagName("span")
         for(let i=0;i<spans.length;i++){
            //这里利用了setProperty给标签style依次插入了 --i 属性
             spans[i].style.setProperty("--i",i+1); 
             spans[i].style.borderRadius = "20px 20px 0px 0px"
         }
     }
     yz()
    </script>

html部分：这个只是用来作为中间闪烁的文字

 <h1>Looading...</h1>

CSS部分：

*{
          margin: 0;
          padding: 0;
      }
      body{
          background: #333;
          height: 100vh;
      }
      .sp{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          display: block;
          background-color: rgb(63, 63, 8);
          width: 15px;
          height: 65px;
          transform: rotate(calc(var(--i)*18deg)) translateY(-180px);
          box-shadow: 0px 0px 3px  rgb(63, 63, 8);
          animation: dd 1.9s linear infinite calc(var(--i)*0.05s);
      }
      @keyframes dd {
          0%,50%{
            box-shadow:inset 0px 0px 10px  rgb(235, 23, 23);
            background-color:  rgb(63, 63, 8);
          }
          51%,100%{
            background-color: yellow;
            box-shadow: 0px 0px 10px  rgb(63, 63, 8),
            0px 0px 10px red,
            0px 0px 30px yellow,
            0px 0px 20px rgb(233, 37, 47);
          }
      }
      h1{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,50%);
          animation: tt 1.5s infinite linear;
          user-select: none;
      }
      @keyframes tt {
        0%,50%{
            text-shadow: 0px 0px 3px  rgb(63, 63, 8);
            color:  rgb(63, 63, 8);
          }
          51%,100%{
            color: yellow;
            text-shadow: 0px 0px 10px  rgb(63, 63, 8),
            0px 0px 10px red,
            0px 0px 10px rgb(165, 162, 13),
            0px 0px 20px rgb(235, 33, 50);
          }
      }

animation: dd 1.9s linear infinite calc(var(--i)*0.05s); 利用了css中的calc() 方法计算每次延时的时间即可实现延时加载动画。