JS+CSS實(shí)現(xiàn)炫酷光感效果
更新時間：2020年09月05日 14:31:11 作者：SADON_jung
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS+CSS帶你實(shí)現(xiàn)炫酷光感效果，供大家參考，具體內(nèi)容如下
效果一：（螺旋式沉浸視覺感受）
效果二：（旋渦式遠(yuǎn)觀視覺感受）
實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>光感效果</title>
</head>
<style>
html,body{
height: 100%;
overflow: hidden;
}
body{
background-color: #c08eaf;
}
.main{
/* 中心點(diǎn) */
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{
/* 動點(diǎn) */
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++){
//創(chuàng)建元素
var newNode = document.createElement("i");
//添加元素
m.appendChild(newNode)
//設(shè)置旋轉(zhuǎn)角度 及x軸方向位移距離
newNode.style.transform=`rotate(${i*12}deg) translateX(80px)`
//設(shè)置動畫延遲
newNode.style.animationDelay=`${i*0.05}s`
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
這次項(xiàng)目中做了一個圖片上傳,要求是大于2MB的就壓縮成2MB一下的再上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題,需要的朋友可以參考下2023-03-03
在之前的編程語言排行榜中，我們曾介紹過轉(zhuǎn)正在即的JavaScript語言，正如文章中闡明的那樣，JavaScript不僅是最具活力的腳本語言，還是是最有用的編程語言之一。2010-08-08
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例，需要的朋友可以參考一下2013-04-04
Javascript柯里化實(shí)現(xiàn)原理及作用解析
這篇文章主要介紹了Javascript柯里化實(shí)現(xiàn)原理及作用解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序三級聯(lián)動選擇器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
這篇文章主要介紹了JS獲取文件大小的方法,結(jié)合實(shí)例總結(jié)分析了JavaScript獲取文件大小的常用技巧,并給出了判斷文件格式與大小的完整實(shí)例供讀者參考,需要的朋友可以參考下2015-12-12
JS實(shí)現(xiàn)模態(tài)框拖拽動態(tài)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)模態(tài)框拖拽動態(tài)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中解析JSON數(shù)據(jù)的三種方法
這篇文章主要介紹了JavaScript中解析JSON數(shù)據(jù)的三種方法,本文講解了eval()方法、new Function方法、JSON.parse()方法等三種方法,需要的朋友可以參考下2015-07-07
JavaScript 批量創(chuàng)建數(shù)組的方法
JavaScript有許多批量創(chuàng)建數(shù)組的方法，為了衡量它們的性能，我分別使用不同的方法創(chuàng)建一個長度為100000的數(shù)組，且鍵和值相等，今天小編給大家分享基于js批量創(chuàng)建數(shù)組的方法，一起看看吧2017-03-03
現(xiàn)代 JavaScript 開發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個 合理 的現(xiàn)代 JavaScript 開發(fā)風(fēng)格指南，并非硬性規(guī)定。其想送出的核心理念是高度統(tǒng)一的代碼風(fēng)格（the law of code style consistency）。2014-05-05