js实现炫酷光感效果
本文实例为大家分享了js实现炫酷光感效果的具体代码，供大家参考，具体内容如下
首先写一个大盒子
然后给这个大盒子添加样式
*{
margin:0;
padding:0;
}
html,
body{
height:100%;
overflow:hidden;
}
body{
background:darkblue;
}
.main{
width:8px;
height:8px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
perspective:800px;/*视角*/
}
在这个大盒子周围写一圈小盒子，我们用js来动态生成
varmain=document.getElementsByClassName("main")[0];
for(varx=0;x<30;x++){
vari=document.createElement("i");
main.appendChild(i);
}
给这些小盒子添加样式
.maini{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,0.5);
box-shadow:0010px0white;
position:absolute;
}
varis=document.getElementsByTagName("i");
for(vari=0;i
效果如下
然后为这些小球添加css动画
.maini{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,0.5);
box-shadow:0010px0white;
position:absolute;
animation:run3sease-in-outinfinite;
}
@keyframesrun{
0%{
opacity:0;
}
10%{
opacity:1;
}
100%{
opacity:1;
transform:translate3d(0,0,560px);
}
}
效果如下
我们发现这些小球都是同时做动画的，那么我现在不想让他们同时做动画怎么办呢~，对了，设置延迟
for(vari=0;i
炫光效果如下
还没完
现在是30个i，我们把它变成60个会怎么样呢
varmain=document.getElementsByClassName("main")[0];
for(varx=0;x<60;x++){
vari=document.createElement("i");
main.appendChild(i);
}
varis=document.getElementsByTagName("i");
for(vari=0;i
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。