首页 > 其他分享 >一个炫酷的CSS动画

一个炫酷的CSS动画

时间:2023-12-22 22:32:15浏览次数:27  
标签:动画 translateX translateY 50% transform rotateZ 炫酷 CSS linear

先不说是啥,直接上代码,想看效果自己复制运行。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        background: black;
      }
      .container {
        width: 300px;
        height: 300px;
      }
      .main1 {
        width: 500px;
        height: 500px;
        transform: translateZ(-150px);
        transform-style: preserve-3d;
      }
      .main2 {
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(60deg);
        position: relative;
      }
      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .positon {
        position: absolute;
      }
      .center {
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      .firstCircle {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 3px solid rgb(42, 153, 255);
      }
      .secondCircle {
        width: 350px;
        height: 350px;
        border-radius: 50%;
        border: 10px solid rgb(42, 153, 255);
        border-color: rgb(42, 153, 255) transparent;

        animation: rotate1 3s linear infinite;
      }
      .thirdCircle {
      }
      .fourthCircle {
        width: 300px;
        height: 300px;
        transform: translateX(-50%) translateY(-50%) translateZ(30px);
        animation: rotate2 3s linear infinite;
      }
      .annulusContent {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
      }
      .bar {
        width: 280px;
        height: 300px;
        background: transparent;
        top: 50%;
        left: 50%;
        transform: translateZ(150px) translateX(-50%) translateY(-50%)
          rotateX(90deg);
        display: flex;
        gap: 20px;
        overflow: hidden;
      }
      .line {
        width: 3px;
        height: 100px;
        background: linear-gradient(
          to top,
          rgb(69, 164, 254),
          rgba(42, 153, 255, 0.1)
        );
      }
      .line1 {
        animation: line1 1s linear infinite;
      }
      .line2 {
        animation: line1 0.5s 0.2s linear infinite;
      }
      .line3 {
        animation: line1 1.5s 0.5s linear infinite;
      }
      .line4 {
        animation: line1 1.3s 1s linear infinite;
      }
      .line5 {
        animation: line1 1.6s 0.3s linear infinite;
      }
      .line6 {
        animation: line1 2s 0.4s linear infinite;
      }
      .line7 {
        animation: line1 1.2s 0.6s linear infinite;
      }
      .line8 {
        animation: line1 1.1s 1.1s linear infinite;
      }
      .line9 {
        animation: line1 1.9s 0.9s linear infinite;
      }
      .line10 {
        animation: line1 1.7s 1.3s linear infinite;
      }
      .line11 {
        animation: line1 1.3s 1.1s linear infinite;
      }
      .line12 {
        animation: line1 1.4s 0.4s linear infinite;
      }
      .annulus {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: conic-gradient(
          rgb(69, 164, 254) 0,
          rgb(69, 164, 254) 2%,
          transparent 2%
        );
        border-radius: 50%;
        -webkit-mask: radial-gradient(
          transparent,
          transparent 57%,
          #000 57%,
          #000 100%
        );
      }
      .annulus1 {
        transform: translateX(-50%) translateY(-50%) rotateZ(10deg);
      }
      .annulus2 {
        transform: translateX(-50%) translateY(-50%) rotateZ(20deg);
      }
      .annulus3 {
        transform: translateX(-50%) translateY(-50%) rotateZ(30deg);
      }
      .annulus4 {
        transform: translateX(-50%) translateY(-50%) rotateZ(40deg);
      }
      .annulus5 {
        transform: translateX(-50%) translateY(-50%) rotateZ(50deg);
      }
      .annulus6 {
        transform: translateX(-50%) translateY(-50%) rotateZ(60deg);
      }
      .annulus7 {
        transform: translateX(-50%) translateY(-50%) rotateZ(70deg);
      }
      .annulus8 {
        transform: translateX(-50%) translateY(-50%) rotateZ(80deg);
      }
      .annulus9 {
        transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
      }
      .annulus10 {
        transform: translateX(-50%) translateY(-50%) rotateZ(100deg);
      }
      .annulus11 {
        transform: translateX(-50%) translateY(-50%) rotateZ(110deg);
      }
      .annulus12 {
        transform: translateX(-50%) translateY(-50%) rotateZ(120deg);
      }
      .annulus13 {
        transform: translateX(-50%) translateY(-50%) rotateZ(130deg);
      }
      .annulus14 {
        transform: translateX(-50%) translateY(-50%) rotateZ(140deg);
      }
      .annulus15 {
        transform: translateX(-50%) translateY(-50%) rotateZ(150deg);
      }
      .annulus16 {
        transform: translateX(-50%) translateY(-50%) rotateZ(160deg);
      }
      .annulus17 {
        transform: translateX(-50%) translateY(-50%) rotateZ(170deg);
      }
      .annulus18 {
        transform: translateX(-50%) translateY(-50%) rotateZ(180deg);
      }
      .annulus19 {
        transform: translateX(-50%) translateY(-50%) rotateZ(190deg);
      }
      .annulus20 {
        transform: translateX(-50%) translateY(-50%) rotateZ(200deg);
      }
      .annulus21 {
        transform: translateX(-50%) translateY(-50%) rotateZ(210deg);
      }
      .annulus22 {
        transform: translateX(-50%) translateY(-50%) rotateZ(220deg);
      }
      .annulus23 {
        transform: translateX(-50%) translateY(-50%) rotateZ(230deg);
      }
      .annulus24 {
        transform: translateX(-50%) translateY(-50%) rotateZ(240deg);
      }
      .annulus25 {
        transform: translateX(-50%) translateY(-50%) rotateZ(250deg);
      }
      .annulus26 {
        transform: translateX(-50%) translateY(-50%) rotateZ(260deg);
      }
      .annulus27 {
        transform: translateX(-50%) translateY(-50%) rotateZ(270deg);
      }
      .annulus28 {
        transform: translateX(-50%) translateY(-50%) rotateZ(280deg);
      }
      .annulus29 {
        transform: translateX(-50%) translateY(-50%) rotateZ(290deg);
      }
      .annulus30 {
        transform: translateX(-50%) translateY(-50%) rotateZ(300deg);
      }
      .annulus31 {
        transform: translateX(-50%) translateY(-50%) rotateZ(310deg);
      }
      .annulus32 {
        transform: translateX(-50%) translateY(-50%) rotateZ(320deg);
      }
      .annulus33 {
        transform: translateX(-50%) translateY(-50%) rotateZ(330deg);
      }
      .annulus34 {
        transform: translateX(-50%) translateY(-50%) rotateZ(340deg);
      }
      .annulus35 {
        transform: translateX(-50%) translateY(-50%) rotateZ(350deg);
      }
      .annulus36 {
        transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
      }
      @keyframes rotate1 {
        0% {
          transform: translateZ(20px) translateX(-50%) translateY(-50%)
            rotateZ(0deg);
        }
        100% {
          transform: translateZ(20px) translateX(-50%) translateY(-50%)
            rotateZ(-360deg);
        }
      }
      @keyframes rotate2 {
        0% {
          transform: translateX(-50%) translateY(-50%) translateZ(30px)
            rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) translateY(-50%) translateZ(30px)
            rotateZ(360deg);
        }
      }

      @keyframes line1 {
        0% {
          transform: translateY(-220px);
        }
        100% {
          transform: translateY(220px);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main1 flex">
        <div class="main2">
          <div class="firstCircle positon center"></div>
          <!-- 最外层的圆环 -->
          <div class="secondCircle positon center"></div>
          <!-- 第二层两段圆环 -->
          <div class="fourthCircle flex positon center">
            <!-- 一堆圆环组成的圆环 -->
            <div class="annulusContent">
              <div class="annulus annulus1"></div>
              <!-- 每一个小圆环 -->
              <div class="annulus annulus2"></div>
              <div class="annulus annulus3"></div>
              <div class="annulus annulus4"></div>
              <div class="annulus annulus5"></div>
              <div class="annulus annulus6"></div>
              <div class="annulus annulus7"></div>
              <div class="annulus annulus8"></div>
              <div class="annulus annulus9"></div>
              <div class="annulus annulus10"></div>
              <div class="annulus annulus11"></div>
              <div class="annulus annulus12"></div>
              <div class="annulus annulus13"></div>
              <div class="annulus annulus14"></div>
              <div class="annulus annulus15"></div>
              <div class="annulus annulus16"></div>
              <div class="annulus annulus17"></div>
              <div class="annulus annulus18"></div>
              <div class="annulus annulus19"></div>
              <div class="annulus annulus20"></div>
              <div class="annulus annulus21"></div>
              <div class="annulus annulus22"></div>
              <div class="annulus annulus23"></div>
              <div class="annulus annulus24"></div>
              <div class="annulus annulus25"></div>
              <div class="annulus annulus26"></div>
              <div class="annulus annulus27"></div>
              <div class="annulus annulus28"></div>
              <div class="annulus annulus29"></div>
              <div class="annulus annulus30"></div>
              <div class="annulus annulus31"></div>
              <div class="annulus annulus32"></div>
              <div class="annulus annulus33"></div>
              <div class="annulus annulus34"></div>
              <div class="annulus annulus35"></div>
              <div class="annulus annulus36"></div>
            </div>
          </div>
          <div class="bar positon flex">
            <!--  流星雨 -->
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
            <div class="line line4"></div>
            <div class="line line5"></div>
            <div class="line line6"></div>
            <div class="line line7"></div>
            <div class="line line8"></div>
            <div class="line line9"></div>
            <div class="line line10"></div>
            <div class="line line11"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 这里的js 主要是一个上下拖动3d旋转的功能 -->
    <script>
      var elem = document.querySelector('.main1')
      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)

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

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

标签:动画,translateX,translateY,50%,transform,rotateZ,炫酷,CSS,linear
From: https://blog.51cto.com/u_15997490/8939249

相关文章

  • getx路由动画
    getx默认动画配置GetMaterialApp(enableLog:true,defaultTransition:Transition.fade,//修改这里opaqueRoute:Get.isOpaqueRouteDefault,popGesture:Get.isPopGestureEnable,transitionDuration:Get.defaultDurationTransition,defaultGlobalState:Get.d......
  • CSS object-fit
    一、object-fitobject-fit属性定义了被替换的元素(如img或video)的内容应如何调整大小以适应其容器。object-fit的默认值是fill,这可能导致图像被挤压或拉伸。让我们来看看可能的值。object-fit的可能值:contain、cover、fill、none1、object-fit:contain在这种情况下,图像的大......
  • 常用xpath选择器和css选择器总结
    xpath选择器表达式说明article选取所有article元素的所有子节点/article选取根元素articlearticle/a选取所有属于article的子元素的a元素//div选取所有div子元素(不论出现在文档任何地方)article//div选取所有属于article元素的后代的div元素,不管它出现在ar......
  • 03--css重点回顾
    CSS层叠样式表一css简介什么是css?层叠样式表命名规则:使用字母、数字或下划线和减号构成,不要以数字开头格式:选择器{属性:值;属性:值;属性:值;....}其中选择器也叫选择符CSS中注释/*...*/二如何使用css样式即html中嵌入css的方式1.内联方式(行内样式......
  • Flutter 隐式动画
    通过几行代码就可以实现隐式动画,由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了,所以叫隐式动画,FLutter中提供的[AnimatedContainer]、[AnimatedPadding]、[AnimatedPositioned.AnimatedOpacity]、[AnimatedDefaultTextStyle]、[AnimatedSwitcher]都属于隐式动画隐式动画......
  • CSS设置一个梯形
    1、图形2、代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style> .d{ width:0px; height:100px; border-left:25pxsolid; border-top:25pxsolidtransparent; border-bottom:2......
  • SVG动画
    一、下载SVG网站:https://undraw.co/点击“browsenow”点击“search”点击第一个点击“DownloadSVGforyourprojects”对代码进行格式化将代码拷贝到vscode中,用快捷键“Shift+Alt+F”进行格式化,格式化之后如下所示:<svgxmlns="http://www.w3.org/2000/svg"data-......
  • css中的::after和::before
    先来看一个::before和::after的例子,给一个元素的前后再不添加新的元素的时候增加内容:<viewclass="info-before">测试before和after</view>.info-before{font-weight:bold;margin:30px;}.info-before::before{content:"添加在::before";......
  • 使用css绘制箭头
    使用css也能直接写出箭头符号,这样不用都使用图片能减少打包的大小。下面是一些常用箭头的css写法://向上的箭头<viewclass="button-up"></view>//css的内容.button-up{position:relative;padding:5px;margin:10pxauto;background:#000;......
  • 使用js和css实现选项卡切换
    HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"hre......