效果圖
不太熟悉如何生成動(dòng)態(tài)圖，所以效果有點(diǎn)出入疫向。原效果與此類似，所有小星星按照自己的時(shí)間一閃一閃豪嚎，并且不會(huì)移動(dòng)搔驼。當(dāng)鼠標(biāo)移入任意小星星時(shí)，小星星旋轉(zhuǎn)180度侈询。
一閃一閃亮晶晶.gif
注意點(diǎn)：
- 小星星的位置舌涨、大小、閃爍時(shí)間需要隨機(jī)數(shù)設(shè)置扔字。
- 由于js中設(shè)置大小縮放動(dòng)畫會(huì)覆蓋掉鼠標(biāo)移入星星時(shí)旋轉(zhuǎn)的動(dòng)畫囊嘉，所以css中要把旋轉(zhuǎn)動(dòng)畫加! important來提高優(yōu)先級(jí)。
- 獲取屏幕的寬高時(shí)注意用||符號(hào)來消除不兼容因素革为。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
border: none;
}
body{
background: black;
}
.spa{
width: 56px;
height: 56px;
background: url("img/star.png") no-repeat;
position: absolute;
animation: fresh 1s linear 0s infinite alternate;
transition: all 1s;
}
@keyframes fresh {
from{
opacity: 0;
}
to{
opacity:1;
}
}
.spa:hover{
transform: rotate(180deg) !important;
}
</style>
<script>
window.onload = function () {
//獲取屏幕寬度和高度
var screenX = document.body.clientWidth || document.documentElement.clientWidth;
var screenY = document.body.clientHeight || document.documentElement.clientHeight;
var body = document.getElementsByTagName('body')[0];
//創(chuàng)建300個(gè)小星星
for(var i=0; i<300; i++) {
var oSpan = document.createElement('span');
oSpan.setAttribute('class','spa');
var x = Math.random() * screenX;
var y = Math.random() * screenY;
var delay = Math.random() * 2;//隨機(jī)控制星星閃爍動(dòng)畫的延遲時(shí)間
var scale = Math.random();//隨機(jī)控制星星的大小
oSpan.style.left = x + 'px';
oSpan.style.top = y + 'px';
oSpan.style.animationDelay = delay + 's';
oSpan.style.transform = 'scale(' + scale + ')';
body.appendChild(oSpan);
}
}
</script>
</head>
<body>
</body>
</html>
另附小星星圖片一張
star.png
