大屏酷炫效果，用一个标签实现酷炫的css动画

最新推荐文章于 2024-10-10 22:23:50 发布

、Pinellia

最新推荐文章于 2024-10-10 22:23:50 发布

阅读量646

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_31843517/article/details/137785648

版权

本文介绍了如何使用CSS中的不同技术，如border、outline、repeating-radial-gradient、repeating-conic-gradient以及伪元素，来创建多层圆环效果，并结合3D转换和动画实现复杂视觉效果，如流星雨元素的制作。

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

最外层圈

这里第一反应应该是border，但是其实还有outline可以用，这里我们把border留给第二层用，我们第一层用outline来实现。

.box {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        outline: 2px solid rgb(42, 153, 255);
        outline-offset: 10px;
      }

得到外面的圆环

第二层圈

第二层我们用border, 然后把上下或者左右的边设为透明

box的样式上加上这些代码

下面的一堆圆环

在上一篇文章里面，我们用了两种方式实现这个圆环

一种是conic-gradient加mask，先利用角向渐变生成扇形，然后用mask遮住下面部分，得到圆环，然后重复多个，给每个不同的旋转角度。

第二种是repeating-conic-gradient加mask，就是一次性生成带黑色间隔的扇形，然后mask遮住。

这里面我们还有第三种实现方式：

repeating-radial-gradient 加 repeating-conic-gradient

重复的径向渐变加重复的角向渐变来实现。

径向渐变可以得到一个完整的圆环，角向渐变可以得到黑色间隙的一堆小圆环。这里面我们给box加上background

上面的一堆圆环

上面的一堆圆环实现起来其实和下面的一样，只是我们不能再用box的backgorund来实现了，因为有一个3d效果，需要沿着z轴做位移。

那我们其实还有两个工具没有用，那就是伪元素。这里我们先用一个::before

.box::before {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0px;
        left: 0px;
        background: repeating-radial-gradient(
            #000,
            #000 50%,
            transparent 50%,
            transparent 60%,
            #000 60%,
            #000 100%
          ),
          repeating-conic-gradient(
            rgb(42, 153, 255) 0,
            rgb(42, 153, 255) 4%,
            transparent 4%,
            transparent 5%
          );
        transform: translateZ(200px);
      }

类流星雨元素

还剩下一个元素，我们就可以用另一个伪元素了，::after。上一篇文章里面，我们用了一些元素来实现流星雨的动画，每一个元素代表其中一颗。这里我们只用一个伪元素实现的话，第一反应应该是用box-shadow来实现。

用box-shadow来实现对自身的多次复制，不过这里有一个缺陷，就是box-shadow默认是黑色，可以指定颜色但是不支持渐变。所以用box-shadow行不通，我们换一种方式来实现。

这里我们还是用repeating-linear-gradient和mask来实现的。

重复的线性渐变实现几个自上而下的渐变色

然后我们再用mask,获得色条

.box::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0px;
        left: 0px;
        background: #fff;
        background: repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 80px,
          rgba(42, 153, 255, 0.1) 80px,
          rgb(42, 153, 255) 130px
        );
        -webkit-mask: repeating-linear-gradient(
          to right,
          transparent 0px,
          transparent 80px,
          #000 80px,
          #000 82px
        );
        transform: rotateX(90deg);
        animation: line 2s linear infinite;
      }

全部代码如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 300px;
        transform: translateZ(-150px);
        transform-style: preserve-3d;
      }
      .box {
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        position: relative;
        border-radius: 50%;
        border: 5px solid rgb(42, 153, 255);
        border-left-color: transparent;
        border-right-color: transparent;
        outline: 2px solid rgb(42, 153, 255);
        outline-offset: 10px;
        background: repeating-radial-gradient(
            #000,
            #000 50%,
            transparent 50%,
            transparent 60%,
            #000 60%,
            #000 100%
          ),
          repeating-conic-gradient(
            rgb(42, 153, 255) 0,
            rgb(42, 153, 255) 4%,
            transparent 4%,
            transparent 5%
          );
        animation: rotate2 2s linear infinite;
      }

      .box::before {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0px;
        left: 0px;
        background: repeating-radial-gradient(
            #000,
            #000 50%,
            transparent 50%,
            transparent 60%,
            #000 60%,
            #000 100%
          ),
          repeating-conic-gradient(
            rgb(42, 153, 255) 0,
            rgb(42, 153, 255) 4%,
            transparent 4%,
            transparent 5%
          );
        transform: translateZ(200px);
        animation: rotate1 2s linear infinite;
      }
      .box::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0px;
        left: 0px;
        background: #fff;
        background: repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 80px,
          rgba(42, 153, 255, 0.1) 80px,
          rgb(42, 153, 255) 130px
        );
        -webkit-mask: repeating-linear-gradient(
          to right,
          transparent 0px,
          transparent 80px,
          #000 80px,
          #000 82px
        );
        transform: rotateX(90deg);
        animation: line 2s linear infinite;
      }

      @keyframes line {
        0% {
          transform: translateZ(-50px) rotateX(90deg) rotateY(0deg);
        }
        100% {
          transform: translateZ(200px) rotateX(90deg) rotateY(-360deg);
        }
      }

      @keyframes rotate1 {
        0% {
          transform: translateZ(200px) rotateZ(0deg);
        }
        100% {
          transform: translateZ(200px) rotateZ(-720deg);
        }
      }
      @keyframes rotate2 {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      var elem = document.querySelector('body')
      var isDragging = false // 用于判断是否正在拖动
      var initialX = 0 // 初始鼠标X坐标
      var initialY = 0 // 初始鼠标Y坐标
      var currentX = 0 // 当前鼠标X坐标
      var currentY = 0 // 当前鼠标Y坐标
      var initialRotationY = 0 // 初始旋转角度（Y轴）
      var initialRotationX = 0 // 初始旋转角度（X轴）

      elem.addEventListener('mousedown', function (e) {
        // 当鼠标按下时
        initialY = e.clientY // 获取初始鼠标Y坐标
        initialRotationY = parseInt(
          getComputedStyle(elem)
            .getPropertyValue('transform')
            .replace(/[^0-9-.,]/g, '')
            .split(',')[4]
        ) // 获取初始旋转角度（Y轴）
        initialRotationX = parseInt(
          getComputedStyle(elem)
            .getPropertyValue('transform')
            .replace(/[^0-9-.,]/g, '')
            .split(',')[5]
        ) // 获取初始旋转角度（X轴）
        isDragging = true // 设置isDragging为true，表示正在拖动
      })

      document.addEventListener('mousemove', function (e) {
        // 当鼠标移动时
        if (isDragging) {
          // 如果正在拖动
          currentY = e.clientY // 获取当前鼠标Y坐标
          var dy = currentY - initialY // Y轴方向移动的距离
          var newRotationY = initialRotationY + dy * -1 // 根据移动方向计算新的旋转角度（Y轴）
          console.log(111, dy, newRotationY)

          elem.style.transform = 'rotateX(' + newRotationY + 'deg)' // 设置元素的旋转角度
        }
      })

      document.addEventListener('mouseup', function () {
        // 当鼠标松开时
        isDragging = false // 设置isDragging为false，表示已经停止拖动
      })
    </script>
  </body>
</html>