JS實(shí)現(xiàn)星星海特效
本文實(shí)例為大家分享了JS實(shí)現(xiàn)星星海特效的具體代碼,供大家參考,具體內(nèi)容如下
知識(shí)點(diǎn)
1.CSS使用@keyframes自定義動(dòng)畫,使用animation調(diào)用自定義動(dòng)畫
2.opacity 透明度。從 0.0 (完全透明)到 1.0(完全不透明)
3.CSS中transform
4.animation-delay 屬性定義動(dòng)畫何時(shí)開始。
5.求屏幕尺寸
var 寬 = document.documentElement.clientWidth; var 高 = document.documentElement.clientHeight;
6.JS創(chuàng)建節(jié)點(diǎn)
7.JS在某元素后追加節(jié)點(diǎn)
appendChild()
8.UnderScore.js通過_調(diào)用其中的API
運(yùn)行效果
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="UnderScore.js"></script> <style> *{margin: 0;padding-top: 0} body{background-color: #000} span{ width: 30px; height: 30px; background: url("star.png") no-repeat; position: absolute; background-size: contain; animation: flash 1s alternate infinite; } @keyframes flash{ 0%{opacity: 0} 25%{opacity: 0.25} 50%{opacity: 0.5} 75%{opacity: 0.75} 100%{opacity: 1} } span:hover{ transform: scale(3, 3) rotate(180deg) !important; transition: all 1s; } </style> </head> <body> <script> window.onload = function (ev) { // 1. 求出屏幕尺寸 var screenWidth = document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; // 2. 動(dòng)態(tài)創(chuàng)建10顆星星 for (var i = 0; i < 200; i++) { // 2.1 創(chuàng)建星星 var span = document.createElement('span'); document.body.appendChild(span); // 2.2 隨即坐標(biāo) var x = parseInt(_.random(0, screenWidth)); var y = parseInt(_.random(0, screenHeight)); span.style.left = x +'px'; span.style.top = y + 'px'; // 2.3 隨機(jī)縮放 var scale = _.random(0, 1.5); span.style.transform = 'scale('+scale+','+scale+')'; // 2.4 頻率 var rate = _.random(0, 1.5); span.style.animationDelay = rate + 's'; } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- HTML+JS實(shí)現(xiàn)“代碼雨”效果源碼(黑客帝國文字下落效果)
- JS實(shí)現(xiàn)黑客帝國文字下落效果
- js仿黑客帝國字母掉落效果代碼分享
- js模擬實(shí)現(xiàn)煙花特效
- js實(shí)現(xiàn)煙花特效
- JS實(shí)現(xiàn)商品櫥窗特效
- JS實(shí)現(xiàn)吸頂特效
- JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
- JS實(shí)現(xiàn)電商商品展示放大鏡特效
- JS實(shí)現(xiàn)音樂鋼琴特效
- JS實(shí)現(xiàn)音樂導(dǎo)航特效
- JS實(shí)現(xiàn)簡單日歷特效
- JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
- JS實(shí)現(xiàn)導(dǎo)航欄樓層特效
- JS實(shí)現(xiàn)普通輪播圖特效
- javascript實(shí)現(xiàn)超好看的3D煙花特效
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效
- Javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊冒泡特效
- JS實(shí)現(xiàn)小星星特效
- JS實(shí)現(xiàn)圖片切換特效
- JS+CSS+HTML實(shí)現(xiàn)“代碼雨”類似黑客帝國文字下落效果
相關(guān)文章
requestAnimationFrame用法優(yōu)化源碼解析
這篇文章主要介紹了requestAnimationFrame用法優(yōu)化源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無縫滾動(dòng)功能詳解
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無縫滾動(dòng)功能,結(jié)合實(shí)例形式分析了javascript定時(shí)器與頁面元素屬性動(dòng)態(tài)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01微信小程序?qū)崿F(xiàn)頁面分享onShareAppMessage
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面分享onShareAppMessage,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08讓多個(gè)輸入框中的內(nèi)容同時(shí)變化的js代碼
怎么樣讓多個(gè)輸入框中的內(nèi)容同時(shí)變化?一般又要兼容IE與firefox2010-01-01