一闪一闪亮晶晶
2017-03-13 本文已影响170人
ForeverYoung20
效果图
不太熟悉如何生成动态图，所以效果有点出入。原效果与此类似，所有小星星按照自己的时间一闪一闪，并且不会移动。当鼠标移入任意小星星时，小星星旋转180度。
一闪一闪亮晶晶.gif
注意点：
- 小星星的位置、大小、闪烁时间需要随机数设置。
- 由于js中设置大小缩放动画会覆盖掉鼠标移入星星时旋转的动画，所以css中要把旋转动画加! important来提高优先级。
- 获取屏幕的宽高时注意用||符号来消除不兼容因素。
代码
<!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];
//创建300个小星星
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;//随机控制星星闪烁动画的延迟时间
var scale = Math.random();//随机控制星星的大小
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
