css 特效 火球 光,JS+CSS实现炫酷光感效果

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

效果一：(螺旋式沉浸视觉感受)

效果二：(旋涡式远观视觉感受)

实现代码：

光感效果

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);

}

}

//获取元素

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`

}

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

您可能感兴趣的文章: