乖乖女

导航

css流星 效果

style:

.loding {
    width: 100%;
    height: 100%;   
  }
  .bg{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    position: relative;
    z-index: 999;
  }
  #stars {
    margin: 0 auto;
    max-width: 1600px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .star {
    display: block;
    width: 1px;
    background: transparent;
    position: relative;
    opacity: 0;
    /*过渡动画*/
    animation: star-fall 3s linear infinite;
    -webkit-animation: star-fall 3s linear infinite;
    -moz-animation: star-fall 3s linear infinite;
  }
  
  .star:after {
    content: '';
    display: block;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 1);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    /*变形*/
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
    -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
    transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
  }
  
  @keyframes star-fall {
    0% {
      opacity: 0;
      transform: scale(0.5) translate3d(0, 0, 0);
      -webkit-transform: scale(0.5) translate3d(0, 0, 0);
      -moz-transform: scale(0.5) translate3d(0, 0, 0);
    }
  
    50% {
      opacity: 1;
      transform: translate3d(-200px, 200px, 0);
      -webkit-transform: translate3d(-200px, 200px, 0);
      -moz-transform: translate3d(-200px, 200px, 0);
    }
  
    100% {
      opacity: 0;
      transform: scale(1.2) translate3d(-300px, 300px, 0);
      -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
      -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
    }
  }

body:

<div class="loding">
        <div class="bg">
            <div id="stars">
                <div class="star" style="top: 0px;left: 300px;"></div>
                <div class="star" style="top: 0px;left: 130px;"></div>
            </div>
        </div>
    </div>

js:

(function () {
            let stars = document.getElementById('stars');
            for (var j = 0; j < 80; j++) {
                let newStar = document.createElement("div");
                newStar.className = "star"
                newStar.style.top = randomDistance(500, -100) + 'px'
                newStar.style.left = randomDistance(1300, 300) + 'px'
                stars.appendChild(newStar)
            }
            function randomDistance(max, min) {
                let distance = Math.floor(Math.random() * (max - min + 1) + min)
                return distance
            }
            var star = document.getElementsByClassName('star')
            for (var i = 0, len = star.length; i < len; i++) {
                star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.1 + 's'
            }
        })();

posted on 2019-12-17 16:04  乖乖女dome  阅读(222)  评论(0编辑  收藏  举报