JS+CSS实现炫酷光感效果

JS+CSS带你实现炫酷光感效果，供大家参考，具体内容如下

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

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

实现代码：

 
 
 
 
 
 html,body{
  height: 100%;
  overflow: hidden;
 }
 body{
  background-color: #c08eaf;
 }
 .main{
  
  width: 8px;
  height: 8px;
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  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;
 }
 
 
 
 @keyframes run{
  0%{
  opacity: 0;
  }
  10%{
  opacity: 1;
  }
  100%{
  opacity: 1;
  
  transform: translate3d(0,0,560px);
  }
 }
 
 
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。