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'
            }
        })();

css流星 效果的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  5. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

随机推荐

  1. Vue中使用keep-alive优化网页性能

    用keep-alive包裹路由 当前数据第一次访问时,会被缓存到浏览器缓存当中,若数据无更替,则直接读取缓存中的数据. 使用keep-alive时会存在一个activated的生命周期钩子 只有在la ...

  2. K8S命令-Kubectl 命令大全

    参考1:https://jimmysong.io/kubernetes-handbook/guide/kubectl-cheatsheet.html?h=kubectl Kubctl 命令是操作 ku ...

  3. 高性能mysql——高性能索引策略

    <高性能MySQL>读书笔记 一. 索引的优点 1. 索引可以让服务器快速定位到表的指定位置,大大减少了服务器需要扫描的数量: 2. 最常见的B-Tree索引按照顺序存储数据,可以用来做o ...

  4. error: src refspec test does not match any.

    我在本地创建了新分支test并提交到github上 错误信息如下: error: src refspec test does not match any. error: failed to push ...

  5. [20191213]toad 12下BIND_AWARE提示无效.txt

    [20191213]toad 12下BIND_AWARE提示无效.txt --//链接http://blog.itpub.net/267265/viewspace-2130781/的测试,发现当时测试 ...

  6. SVN清理失败(clean up)或者(lock)问题进入死循环最终解决方案

    解决方法: step1: 到 sqlite官网 (http://www.sqlite.org/download.html) 下载 sqlite3.exe step2: 将下载到的 sqlite3.ex ...

  7. HTTP与WWW服务

    1.查看本地DNS缓存 ipconfig /displaydns #显示DNS缓存内容ipconfig /flushdns #清除DNS缓存 2.查看本地hosts. C:\Windows\Syste ...

  8. gradle环境搭建

    最近我在尝试了解跨平台技术的发展,首先则是想到了cordova.环境配置过程中有依赖gradle,下面简单记录了在windos10系统下搭建gradle环境的过程. 什么是gradle Gradle是 ...

  9. 简单了解一下:var 、let、const

    var 重新赋值,重新定义,作用域 属于:function scope: let 声明的变量只在 let 命令所在的代码块内有效,Block scope. const 声明一个只读的常量,一旦声明,常 ...

  10. Chilkat9.5.0.75(x86+x64)ActiveX+注册机

    链接:https://pan.baidu.com/s/1GiUnlcRX1pLDiF6yVnBnVQ  密码:ivfv