js實(shí)現(xiàn)炫酷光感效果
更新時(shí)間：2020年09月05日 14:32:16 作者：Cool_breeze_
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)炫酷光感效果的具體代碼，供大家參考，具體內(nèi)容如下
首先寫一個(gè)大盒子
<div class="main"></div>
然后給這個(gè)大盒子添加樣式
* {
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; /* 視角 */
}
在這個(gè)大盒子周圍寫一圈小盒子，我們用js來動(dòng)態(tài)生成
var main = document.getElementsByClassName("main")[0];
for (var x = 0; x < 30; x++) {
var i = document.createElement("i");
main.appendChild(i);
}
給這些小盒子添加樣式
.main i {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 0 white;
position: absolute;
}
var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
}
效果如下
然后為這些小球添加css動(dòng)畫
.main i {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 0 white;
position: absolute;
animation: run 3s ease-in-out infinite;
}
@keyframes run {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 560px);
}
}
效果如下
我們發(fā)現(xiàn)這些小球都是同時(shí)做動(dòng)畫的，那么我現(xiàn)在不想讓他們同時(shí)做動(dòng)畫怎么辦呢~，對了，設(shè)置延遲
for (var i = 0; i < is.length; i++) {
is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
is[i].style.animationDelay = `${i * 0.05}s`;
}
炫光效果如下
還沒完
現(xiàn)在是30個(gè)i，我們把它變成60個(gè)會(huì)怎么樣呢
var main = document.getElementsByClassName("main")[0];
for (var x = 0; x < 60; x++) {
var i = document.createElement("i");
main.appendChild(i);
}
var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
is[i].style.animationDelay = `${i * 0.05}s`;
}
效果如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能,涉及微信小程序wx:for循環(huán)讀取data數(shù)值及事件綁定修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
JS實(shí)現(xiàn)簡單的二維矩陣乘積運(yùn)算
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的二維矩陣乘積運(yùn)算方法,涉及JavaScript基于數(shù)組操作實(shí)現(xiàn)矩陣運(yùn)算的功能,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度新聞導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式的文件實(shí)例
通過使用JavaScript我們可以很方便地實(shí)現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
使用 Node.js 做 Function Test實(shí)現(xiàn)方法
這篇文章介紹了Node.js 做 Function Test實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-10-10
js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ctrl+v粘貼上傳圖片，兼容chrome，firefox，ie11，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
Android 自定義view仿微信相機(jī)單擊拍照長按錄視頻按鈕
這篇文章主要介紹了Android 自定義view仿微信相機(jī)單擊拍照長按錄視頻按鈕，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了electron 如何將任意資源打包的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
微信小程序獲取手機(jī)網(wǎng)絡(luò)狀態(tài)的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機(jī)網(wǎng)絡(luò)狀態(tài)的方法,涉及微信小程序wx.getNetworkType函數(shù)檢查網(wǎng)絡(luò)連接狀態(tài)的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法
這篇文章主要介紹了js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法,涉及javascript操作圖片特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02