這篇文章主要介紹了JS怎么實(shí)現(xiàn)星星海特效,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、樺川網(wǎng)絡(luò)推廣、小程序定制開發(fā)、樺川網(wǎng)絡(luò)營銷、樺川企業(yè)策劃、樺川品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎(jiǎng);成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供樺川建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn具體內(nèi)容如下
知識點(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>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS怎么實(shí)現(xiàn)星星海特效”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前題目:JS怎么實(shí)現(xiàn)星星海特效-創(chuàng)新互聯(lián)
分享路徑:http://muchs.cn/article2/dejoic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、用戶體驗(yàn)、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容