51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

使用CSS3实现流星雨动画教程

时间:2017-08-17 15:51点击:
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。

要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,

我们这里介绍第2种方法,在粒子数量少的时候,实现起来要更为简单,且便于调试。

先预览下整体效果:



流星雨的构成

流星雨=流星+雨。流星本身包含2个部分,一个是带光晕的星星,一个是尾部的运动轨迹。

而雨实际上就是一个重力掉落的动画。

首先我们实现一个星星的形状:



    .star {  
        display: block;  
        width: 4px;  
        height: 4px;  
        border-radius: 50%;//小圆点  
        background: #FFF;  
        top: 100px;  
        left: 400px;  
        position: relative;  
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);//光晕部分  
    }  



上面的代码实际上是一个带灰白阴影的白色小圆点。通过改变background属性可以得到不同颜色的星星。

接着我们来实现一个尾部轨迹,我们可以使用另外的元素,但CSS的伪元素刚好可以用来做这件事情。


    .star:after {  
        content: '';  
        display: block;  
        top: 0px;  
        left: 4px;  
        border: 0px solid #fff;  
        border-width: 2px 90px 2px 90px;  
        border-color: transparent transparent transparent rgba(255, 255, 255, .3);  
    }  


上述代码前面定义了扁扁的长方形,最后一行把该长方形变为以左边为底的侧翻过来的三角形,如下图所示:



接着我们需要把这个尾巴旋转一个角度,以呈现倾斜的效果:

    transform: rotate(-45deg) translate3d(1px, 3px, 0);  
    transform-origin: 0% 0%;  


除了rotate旋转外,我们加了一点点平移,主要是为了校对星星的中心点,现在看起来像这样:


这样流星元素就做好了。接下来我们给这个流星添加动画,在重力掉落过程(遇空气阻力有减速)中淡入淡出。
星光动画


    @keyframes star-ani {  
        0% {  
            opacity: 0;  
            transform: scale(0) rotate(0) translate3d(0, 0, 0);  
        }  
        50% {  
            opacity: 1;  
            transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);  
        }  
        100% {  
            opacity: 0;  
            transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);  
        }  
    }  


注意踏得网的在线编辑器已默认加载了prefixfree控件,所以以上代码均没有添加浏览器前缀。


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开