js+css带你实现炫酷光感效果，供大家参考，具体内容如下
效果一：（螺旋式沉浸视觉感受）
效果二：（旋涡式远观视觉感受）
实现代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!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>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Twinkle_sone/article/details/108091567