zoukankan      html  css  js  c++  java
  • css流星 效果

    style:

    .loding {
         100%;
        height: 100%;   
      }
      .bg{
         100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: #000;
        position: relative;
        z-index: 999;
      }
      #stars {
        margin: 0 auto;
        max- 1600px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
      }
      .star {
        display: block;
         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- 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'
                }
            })();
  • 相关阅读:
    【网络流24题】方格取数问题(最大流)
    运维之思科篇——NAT基础配置
    NAT地址转换常用命令详解
    NAT(地址转换技术)详解
    Linux命令之grep用法详解:grep与正则表达式 [转]
    curl查询公网出口IP
    CentOS下安装Telnet服务
    Linux之Xinetd服务介绍
    上市公司年报发布时间是什么时候?
    jackson序列化字段字母大小写及字段名重复
  • 原文地址:https://www.cnblogs.com/whx123/p/12055069.html
Copyright © 2011-2022 走看看