您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用JavaScript編寫一個星星閃耀特效,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面,但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性,在絕大多數(shù)瀏覽器的支持下,可以在多種平臺下運行。
思路:
1、準(zhǔn)備一張星星的圖片
2、創(chuàng)建多個星星(可以利用for循壞)
3、求出可視網(wǎng)頁的寬高 clientWidth,clientHeight
4、設(shè)置星星的隨機坐標(biāo) 利用 Math.random()
5、設(shè)置星星的縮放可以用css中的scale
6、設(shè)置星星的縮放延遲頻率 animationDelay
7、給星星加動畫(鼠標(biāo)移動時,星星方法旋轉(zhuǎn))
代碼如下
<style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } span{ width: 30px; height: 30px; background: url("../images_js/star.png") no-repeat; position: absolute; background-size:100% 100%; animation: flash 1s alternate infinite; } @keyframes flash { 0%{opacity: 0;} 100%{opacity: 1;} } span:hover{ transform: scale(3, 3) rotate(180deg) !important; transition: all 1s; } </style> </head> <body> <script> window.onload = function () { // 1. 求出屏幕的尺寸 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight; // 2. 動態(tài)創(chuàng)建星星 for(var i=0; i<150; i++){ // 2.1 創(chuàng)建星星 var span = document.createElement('span'); document.body.appendChild(span); // 2.2 隨機的坐標(biāo) var x = parseInt(Math.random() * screenW); var y = parseInt(Math.random() * screenH); span.style.left = x + 'px'; span.style.top = y + 'px'; // 2.3 隨機縮放 var scale = Math.random() * 1.5; span.style.transform = 'scale('+ scale + ', ' + scale + ')'; // 2.4 頻率 var rate = Math.random() * 1.5; span.style.animationDelay = rate + 's'; } } </script>
上述內(nèi)容就是使用JavaScript編寫一個星星閃耀特效,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。