我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看下效果

lodng倒影效果

实现思路

先考虑下是否需要js来支持
看上面的loding除了基本样式，就只剩一个旋转的动画和倒影的样式
其中旋转可以通过animation来实现
倒影可以通过js的copy dom + css的样式翻转来实现

当然也可以通过一个css3的属性-webkit-box-reflect来实现

用一个简单的例子来说说明下-webkit-box-reflect属性的使用效果

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      color: pink;
      font-size: 32px;
      font-weight: 600;
      -webkit-box-reflect: below 1px linear-gradient(transparent, rgb(7, 15, 26));
    }
  </style>
</head>

<body>
  <div class="text">我是name</div>
</body>

</html>

我们看到，其实很简单，只要使用了该属性，就自动实现一个倒影效果，然后通过属性值来控制倒影的样式

大概思路已经捋清楚了，接下来来具体实现以下吧

具体实现

设置基础html

  <div class="container">
    <span>Loading...</span>
    <div class="circle">
      <div class="ring"></div>
    </div>
  </div>

倒影样式

因为要整体dom都做倒影，因此，给最外层domcontainer添加倒影样式

.container {
  position: relative;
  height: 150px;
  width: 250px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgb(7, 15, 26));
}

文字样式

比较简单

.container>span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgb(20, 129, 202);
  text-shadow: 0 0 10px rgb(20, 129, 202),
    0 0 30px rgb(20, 129, 202),
    0 0 60px rgb(20, 129, 202),
    0 0 100px rgb(20, 129, 202);
  font-size: 18px;
  z-index: 1;
}

旋转

首先旋转的有一个大的圆形domcircle

.circle {
  position: relative;
  margin: 0 auto;
  height: 150px;
  width: 150px;
  background-color: rgb(13, 10, 37);
  border-radius: 50%;
  animation: zhuan 2s linear infinite;
}

@keyframes zhuan {
  0% {

    transform: rotate(0deg);
  }

  100% {

    transform: rotate(360deg);
  }
}

实现圆环轨道

以上实现了一个大圆的样式，接着通过伪元素实现一个小圆，将小圆的背景设置成画布背景，从而将大圆转换成圆环

.circle::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgb(7, 15, 26);
  border-radius: 50%;
}

实现圆环轨道的渐变颜色

通过观察，我们只需要渲染半个圆环的渐变样式即可，实现思路如上。

渐变色则借助background-image来实现

.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 150px;
  background-image: linear-gradient(180deg, rgb(22, 121, 252), transparent 80%);
  border-radius: 75px 0 0 75px;
}

实现loading头部的光点样式

光点的样式重点是box-shadow

.ring::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -2.5px;
  width: 15px;
  height: 15px;
  background-color: rgb(40, 124, 202);
  box-shadow: 0 0 5px rgb(40, 151, 202),
    0 0 10px rgb(40, 124, 202),
    0 0 20px rgb(40, 124, 202),
    0 0 30px rgb(40, 124, 202),
    0 0 40px rgb(40, 124, 202),
    0 0 50px rgb(40, 124, 202),
    0 0 60px rgb(40, 124, 202),
    0 0 60px rgb(40, 124, 202);
  border-radius: 50%;
  z-index: 1;
}

完整代码

总结

实现loading倒影的关键有两个

实现旋转的动画
1. 通过伪元素的遮挡实现圆环效果
2. 通过background-image来实现渐变效果
3. 通过text-shadow来实现光点效果
实现倒影效果
1. 通过属性-webkit-box-reflect

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

学习自老哥北极光之夜，感兴趣的可以去了解下。

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

Loading倒影效果

前言

正文