属于冰凌童鞋的流星雨

meteor shower in css3 and js

h5, star

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2907
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502567828155&di=cc2f1f5df0ac3aaf830230afa99bd698&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201507%2F05%2F20150705210031_TYwKm.thumb.700_0.jpeg')
}
#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, .5);
    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);
    }
}

HTML

meteor shower in css3 and js

h5, star

编辑器支持Emmet

快捷键

meteor shower in css3 and js

h5, star

CSS3 蓝色流星雨

CSS3卡通版星球、星光闪耀和火雨流星动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：