本次主要是來實現上面的星空效果：在黑色的背景下面，有大小不一的星星在閃爍，當鼠標懸浮時，星星放大並旋轉。
首先，我們需要一個大的夜空容器和放星星的容器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } span{ width: 30px; height: 30px; background: url("images/star.png") no-repeat; position: absolute; background-size:100% 100%; } </style> </head> <body> <span></span> </body> </html>
此時在大背景下有一顆星星，但該星星是固定的，我們需要通過css添加閃爍的效果：
span{
animation: flash 1s alternate infinite;
}
@keyframes flash {
0%{opacity: 0;}
100%{opacity: 1;}
}
目標是在不同的地方顯示隨機大小的星星，所以，我們需要做以下幾步操作：
- 計算出星星可顯示位置
- 循環生成多個星星，即span
- 利用隨機數生成星星的定位值，使其在不同位置顯示
- 利用隨機數計算星星的縮放比，在界面中顯示不同大小的星星
<script> window.onload = function () { //屏幕的尺寸 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight; //動態創建多個星星 for(var i=0; i<150; i++){ var span = document.createElement('span'); document.body.appendChild(span); //位置隨機 var x = parseInt(Math.random() * screenW); var y = parseInt(Math.random() * screenH); span.style.left = x + 'px'; span.style.top = y + 'px'; //大小隨機 var scale = Math.random() * 1.5; span.style.transform = 'scale('+ scale + ', ' + scale + ')'; } } </script>
此時界面中已經出現了上面的效果，但是此時所有星星的閃爍頻率是相同的，因為在用css3寫樣式的時候，我們只定義了相同的執行時間，所以我們可以給不同的星星的動畫添加不同的延遲時間，這樣視覺上就不會出現所有的一起閃爍的效果了。
var rate = Math.random() * 1.5;
span.style.animationDelay = rate + 's';
最后就是添加鼠標懸浮事件了，當鼠標懸浮時，星星旋轉並放大，我們也可以用css實現。
span:hover{
transform: scale(3, 3) rotate(180deg) !important;
transition: all 1s;
}
至此，我們就完成了最開始想要的效果了，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } span{ width: 30px; height: 30px; background: url("images/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> <span></span> <script> window.onload = function () { // 屏幕的尺寸 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight; // 2. 動態創建多個星星 for(var i=0; i<150; i++){ var span = document.createElement('span'); document.body.appendChild(span); //位置隨機 var x = parseInt(Math.random() * screenW); var y = parseInt(Math.random() * screenH); span.style.left = x + 'px'; span.style.top = y + 'px'; //大小隨機 var scale = Math.random() * 1.5; span.style.transform = 'scale('+ scale + ', ' + scale + ')'; //頻率隨機 var rate = Math.random() * 1.5; span.style.animationDelay = rate + 's'; } } </script> </body> </html>
下載完整詳細代碼：點這里