JS+CSS带你实现炫酷光感效果～-阿里云开发者社区

JS+CSS带你实现炫酷光感效果～

2023-11-09 34

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JS+CSS带你实现炫酷光感效果～

JS+CSS带你实现炫酷光感效果～

效果一：（螺旋式沉浸视觉感受）

效果二：（旋涡式远观视觉感受）

实现代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>光感效果</title>
  </head>
  <style>
    html,body{
      height: 100%;
      overflow: hidden;
    }
    body{
      background-color: #c08eaf;
    }
    .main{
      /* 中心点 */
      width: 8px;
      height: 8px;
      /* background-color: aqua; */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      /* 
      *景深，修改此属性可获得如上图展示的不同效果
      *如：图一的perspective为400px
      *图二的perspective为800px
      *修改为其它值还可获得更多效果
      */
      perspective: 800px;
    }
    .main i{
      /* 动点 */
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background:white;
      box-shadow: 0 0 10px 0 white;
      position: absolute;
      /* 动画 */
      animation: run 3s ease-in-out infinite;
    }
    /* .main i:nth-child(1){
      transform: rotate(0deg) translateX(80px);
    } */
    /* 动画 */
    @keyframes run{
      0%{
        opacity: 0;
      }
      10%{
        opacity: 1;
      }
      100%{
        opacity: 1;
        /* 3D动画效果 */
        transform: translate3d(0,0,560px);
      }
    }
  </style>
  <body>
    <div class="main" id="main">
    </div>
  </body>
  <script type="text/javascript">
    //获取元素
    var m = document.getElementById("main");
    for(var i = 0;i<60;i++){
      //创建元素
      var newNode = document.createElement("i");
      //添加元素
      m.appendChild(newNode)
      //设置旋转角度 及x轴方向位移距离
      newNode.style.transform=`rotate(${i*12}deg) translateX(80px)`
      //设置动画延迟
      newNode.style.animationDelay=`${i*0.05}s`
    }
  </script>
</html>