這期內容當中小編將會給大家帶來有關利用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>上述就是小編為大家分享的利用JS+CSS實現一個炫酷光感效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
