使用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控件,所以以上代码均没有添加浏览器前缀。
你可以自己在线试试。(该在线实例还包含一个月亮背景)
by iefreer
使用CSS3实现流星雨动画教程相关推荐
- 25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
- 用 CSS3 做一个流星雨动画
昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars" ...
- 40个超酷的jQuery动画教程
原文地址:http://www.goodfav.com/40-cool-jquery-animation-tutorials-1189.html 由于它的到来,已经引起了jQuery的网络风暴,现在是 ...
- css 涟漪,CSS3水波涟漪动画定位样式如何制作
CSS3水波涟漪动画定位样式如何制作 宝剑锋从磨砺出,梅花香自苦寒来.以下是小编为大家搜索整理的'CSS3水波涟漪动画定位样式如何制作,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网 ...
- CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
- CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
- html中如何设置动画效果,css3如何设置动画?
首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes"规则". animation属性和@keyframes"规则" ...
- CSS3实现流星动画
title: CSS3实现流星动画 date: 2017年8月18日 00:31:25 tags: css categories: 实用工具 author: "JiaWei" 来个 ...
最新文章
- DevExpress的DateEdit设置显示日期和时间
- 【PC工具】一个好用的评分很高的文件管理器Files
- django与mysql实现增删_django与mysql实现简单的增删查改
- 苹果cms V10模板 仿特视网自适应模板
- python猜词游戏源代码_Python趣味小游戏编写教学
- centos-rpm
- 中基协会长洪磊:尽快制定大类资产配置管理办法 推非保本理财转型
- Excel学习 -- 函数基础
- Weka的下载与安装
- ferguson博弈_博弈 - xiaoguozi's Blog - C++博客
- Vue项目打包文件过大(优化)
- 服务器没有显示器能接笔记本吗,笔记本能连显示器吗_笔记本能不能接显示器...
- 逻辑思维题 微信18954274246 答案
- linux gtestgmock安装
- gpg: keyserver timed out
- 旺店通与金蝶集成解决方案
- 结合d3.js实现气象数据的可视化
- 手把手教你从零开始做一个好看的 APP
- Pico XR Unity开发时如何设置应用版权保护
- Lombok神器带你飞(简化POJO)