使用CSS3实现流星雨动画教程
来源:互联网 发布:2016淘宝开店教程视频 编辑:程序博客网 时间:2024/04/28 23:17
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。
要实现这样的效果,有两种方法,一个是使用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控件,所以以上代码均没有添加浏览器前缀。
你可以自己在线试试。(该在线实例还包含一个月亮背景)
by iefreer
4 0
- 使用CSS3实现流星雨动画教程
- C语言实现流星雨
- 流星雨
- 流星雨
- 流星雨
- [css3动画教程]:逐帧自适应精灵图
- Unity3D手动实现UV动画教程
- 纯css实现的流星雨的效果
- 使用CSS3实现树形控件
- 使用CSS3实现按钮特效
- 使用css3实现消息框
- 使用CSS3实现树形控件
- 神奇的流星雨——字母雨的实现
- 使用CSS3 @font-face实现个性化字体
- 使用css3过渡属性实现翻牌效果
- 使用CSS3 MEDIA QUERIES实现网页自适应
- 使用CSS3 @font-face实现个性化字体
- 使用纯 CSS3 动画实现地球转动
- FJNUOJ1156
- 综合案例 第80课:Spark SQL网站搜索综合案例实战 以京东找出搜索平台上用户每天搜索排名5名的产品,The hottest!
- 客户端储存
- [Sicily 1090 Highways] 求最小生成树的两种算法(普里姆算法/克鲁斯卡尔算法)
- 串(链串)
- 使用CSS3实现流星雨动画教程
- “”和null的区别
- Java入门(概述篇)
- freemarker 数字格式化深入理解
- 广告条目的android代码,常使用
- Quartz的触发器使用
- C#OOP之一面向对象简介
- 南京理工校赛 c count_prime 容斥原理 求(1,r)与n互质模板
- [C语言][LeetCode][82]Remove Duplicates from Sorted List II