.index { position:fixed; width:100%; background:#000000; height:100%; } #stars { width:100%; } .star { display:block; width:5px; height:5px; border-radius:50%; background:#FFF; position:absolute; transform-origin:100% 0; animation:star-ani 4s linear infinite; -webkit-animation:star-ani 5s linear infinite; box-shadow:0 0 5px 5px rgba(255,255,255,.3); opacity:0; z-index:2; } .star:after { content:''; display:block; top:0px; left:4px; border:0px solid #fff; border-width:0px 90px 2px 90px; border-color:transparent transparent transparent rgba(255,255,255,.3); transform:rotate(-45deg) translate3d(1px,3px,0); box-shadow:0 0 1px 0 rgba(255,255,255,.1); transform-origin:0% 100%; } @keyframes star-ani { 0% { opacity:0; transform:scale(0) translate3d(0,0,0); } 20% { opacity:0.8; transform:scale(0.2) translate3d(-100px,100px,0); } 40% { opacity:0.8; transform:scale(0.4) translate3d(-200px,200px,0); } 60% { opacity:0.8; transform:scale(0.6) translate3d(-300px,300px,0); } 80% { opacity:1; transform:scale(1) translate3d(-350px,350px,0); } 100% { opacity:1; transform:scale(1.2) translate3d(-400px,380px,0); } }
// js随机生成流星 for (var j = 0; j < 20; j++) { var newstar = document.createelement("div") newstar.classname = "star" newstar.style.top = randomdistance(500, -100) + 'px' newstar.style.left = randomdistance(1980, 300) + 'px' stars.appendchild(newstar) }
可改变j增加或减少生成的数量