使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。
要实现这样的效果,有两种方法,一个是使用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控件,所以以上代码均没有添加浏览器前缀。
你可以自己在线试试。(该在线实例还包含一个月亮背景)


最新评论
- 相关文章
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...