css3实现烟花效果,CSS3 带颤动效果的简易烟花动效
CSS
语言：
CSSSCSS
确定
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
}
.pyro > .before,
.pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-moz-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-o-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-ms-keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@keyframes bang {
to {
box-shadow: 170px -340.66667px #00ffee, -186px -28.66667px #b700ff, 186px -137.66667px #00a2ff, 116px -95.66667px #ff3300, 50px -278.66667px #ff8800, -193px -371.66667px #f200ff, 27px -164.66667px #ffa200, 110px 35.33333px #00ff33, 121px -100.66667px #6a00ff, 81px 51.33333px #0080ff, 83px -253.66667px #00f7ff, -42px -173.66667px #ff1a00, -133px -279.66667px #0033ff, 75px 81.33333px #ff0091, 158px -292.66667px #ff1100, -56px -298.66667px #ff3300, 124px -158.66667px #00ff09, -71px -308.66667px #7700ff, 141px -170.66667px #00ff2b, 201px -306.66667px #66ff00, -107px 30.33333px #9500ff, 102px -297.66667px #00ff9d, 21px -281.66667px #dd00ff, 165px -241.66667px #6200ff, 202px -183.66667px #ff00f7, 101px -54.66667px #2600ff, 93px -46.66667px #ff006a, 99px -376.66667px #88ff00, 203px -175.66667px #ff002b, -15px -203.66667px #84ff00, -230px -375.66667px #2f00ff, -170px -155.66667px #00ff22, -49px -308.66667px #ff00cc, -18px -218.66667px #ff7b00, -122px 21.33333px #33ff00, -153px -149.66667px #00ff40, 150px 52.33333px #00ff9d, 175px -217.66667px #7300ff, -249px 81.33333px #00ff15, -49px -403.66667px #0026ff, -92px -353.66667px #1eff00, -23px -31.66667px #ff0011, 155px -272.66667px #ff0088, -64px -307.66667px #008cff, 51px -232.66667px #22ff00, 129px 43.33333px #ff0011, -73px 58.33333px #00ff3c, -213px 18.33333px #00ff55, 14px 80.33333px #00ffaa, -121px -338.66667px #00a6ff, 103px -75.66667px #ffa200;
}
}
@-webkit-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-moz-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-o-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-ms-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-webkit-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-moz-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-o-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-ms-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
css3实现烟花效果,CSS3 带颤动效果的简易烟花动效相关推荐
- echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述 如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路 首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
- css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- css3星球围绕轨迹开场动画特效 带流星效果
css3星球围绕轨迹开场动画特效 带流星效果 .star 控制流星效果,角度速度可自定义 <!DOCTYPE html> <html class="two"> ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
最新文章
- SPI初始化C语言编程,SD卡spi模式读写,初始化和复位都成功了
- GitHub上传本地代码到仓库[Windows]
- Redis(案例五：Set数据)
- java 加载类java_深入研究Java类加载机制
- 求出0～999之间的所有“水仙花数”并输出。“水仙花数”是指一个三位数，其各位数字的立方和确好等于该数本身
- 数据网格组件 Handsontable 不再开源，采用自拟的非商业许可证
- Sublime text2 插件推荐
- 超星pdg格式转换为pdf格式原理方法
- linux删除mysql用户_如何删除MySQL用户帐户
- Android利用jsoup爬虫爬网页数据（二）
- 二叉树任意两节点之间的最短距离
- 技能Get·PC及手机微信聊天记录的备份与还原
- C语言-大端存储和小端存储
- 为TreeView正色
- #c语言计算某年某月的天数
- 批处理bat文件连接SQL Server数据库并执行相关sql代码
- Google以9000万美元了结点击欺诈案
- vue如何监听多个input框_vue中两个input框输入值，自动计算总和到另一个Input框，怎么实现...
- Web3.0 元宇宙 区块链
- 直播类app开发，实现一个进度条效果
热门文章
- 电脑怎么换自己的壁纸_电脑硬件到底应该怎么选？自己应该如何组装电脑？
- 原生与html,解析原生与html之间进行的一些关联
- IDA的函数操作,与导航操作；
- Python基础教程：内置类型之数值
- python基础教程：常量 （最全常量解析）
- 使用Python3进行AES加密和解密 输入的数据
- Python命令行参数解析模块getopt使用实例
- Intel Realsense D435 报错 Couldn't resolve requests
- python 对图片进行直方图均衡化处理（批量自动遍历文件夹图片）
- pycharm pycharm中用matplolib的ax3.plot_surface画出的3D(三维图)(三维函数)不能旋转怎么办?