本篇文章為大家展示了使用JavaScript編寫一個星星閃耀特效，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。
思路：
1、準備一張星星的圖片
2、創建多個星星（可以利用for循壞）
3、求出可視網頁的寬高 clientWidth，clientHeight
4、設置星星的隨機坐標 利用 Math.random()
5、設置星星的縮放可以用css中的scale
6、設置星星的縮放延遲頻率 animationDelay
7、給星星加動畫（鼠標移動時，星星方法旋轉）
代碼如下
<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. 動態創建星星
for(var i=0; i<150; i++){
// 2.1 創建星星
var span = document.createElement('span');
document.body.appendChild(span);
// 2.2 隨機的坐標
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>上述內容就是使用JavaScript編寫一個星星閃耀特效，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
