使用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控件,所以以上代码均没有添加浏览器前缀。
你可以自己在线试试。(该在线实例还包含一个月亮背景)


最新评论
- 相关文章
CentOS6 Apache2.2多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP/2背景和新特性简介
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
更多...