js實(shí)現(xiàn)星星海特效的示例
首先需要獲取屏幕大?。?/p>
var screenWidth = document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight;
接著可以定義動(dòng)畫(huà)（星星透明度）：
@keyframes flash { 0%{opacity: 0} 25%{opacity: 0.25} 50%{opacity: 0.5} 75%{opacity: 0.75} 100%{opacity: 1} }
全部代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style> div{ width: 70px; height: 80px; background: url('./images/star.jpg') no-repeat; animation: flash 1s; } body{ background-color: black } @keyframes flash { 0%{opacity: 0} 25%{opacity: 0.25} 50%{opacity: 0.5} 75%{opacity: 0.75} 100%{opacity: 1} } </style></head><body><script> var screenWidth = document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; // 生產(chǎn)50個(gè)星星 for (let i = 0; i <50 ; i++) { var box=document.createElement(’div’); document.body.appendChild(box); x=Math.random()*screenWidth; y=Math.random()*screenHeight; box.style.position=’relative’; box.style.left=x+’px’; box.style.right=y+’px’; } boxList=document.getElementsByTagName('div'); for (let i = 0; i < boxList.length; i++) { boxList[i].onmouseover=function () { this.style.transform=’scale(1.5,1.5)’; }; boxList[i].onmouseout=function () { this.style.transform=’scale(1,1)’; }; }</script></body></html>
效果如下：
以上就是js實(shí)現(xiàn)星星海特效的示例的詳細(xì)內(nèi)容，更多關(guān)于js 星星海特效的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 理解PHP5中static和const關(guān)鍵字2. Android table布局開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器3. python 代碼實(shí)現(xiàn)k-means聚類(lèi)分析的思路(不使用現(xiàn)成聚類(lèi)庫(kù))4. IntelliJ IDEA安裝插件的方法步驟5. Java如何基于反射機(jī)制獲取不同的類(lèi)6. php模擬實(shí)現(xiàn)斗地主發(fā)牌7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. Android 在 res/layout 文件夾 下創(chuàng)建一個(gè) 子文件夾實(shí)例9. PHP安全-命令注入10. Vuex localStorage的具體使用
網(wǎng)公網(wǎng)安備