怎么用html制作满天星,html+js+css 实现满天星

满天星

*{

margin: 0;

padding: 0;

}

html,body {

width: 100%;

height: 100%;

background-color: black;

position: relative;

}

.star-animation {

position: relative;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

/*动画设计*/

@-webkit-keyframes identifier {

25% {

transform: scale(1.5);

}

50% {

transform: scale(2);

}

75% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

@-o-keyframes identifier {

25% {

transform: scale(1.5);

}

50% {

transform: scale(2);

}

75% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

@-moz-keyframes identifier {

25% {

transform: scale(1.5);

}

50% {

transform: scale(2);

}

75% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

@keyframes identifier {

25% {

transform: scale(1.5);

}

50% {

transform: scale(2);

}

75% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

// 自调用函数，在加载该文件时就开始工作

(function(container) {

for (var i = 0; i < 300; i++) {

container.append(starFactory());

}

})(document.getElementsByClassName("star-animation")[0]);

// 创建星星的一个工厂函数

function starFactory() {

let star = document.createElement("div");

let width = Math.ceil(Math.random()*5);

star.style.position = "absolute";

star.style.width = width + 'px';

star.style.height = width + 'px';

star.style.backgroundColor = '#909090';

star.style.top = Math.ceil(Math.random()*window.innerHeight) + 'px';

star.style.left = Math.ceil(Math.random()*window.innerWidth) + 'px';

star.style.boxShadow = "#545454 0 0 "+Math.ceil(Math.random()*5)+"px"+Math.ceil(Math.random()*5)+" 5px";

star.style.borderRadius = width + 'px';

// 当星星直径小于3时，有一个放大缩小的动画

if (width < 3) {

star.style.animation = "identifier 2000ms infinite 500ms";

}

return star;

}