纯css制作烟花特效
2024-04-12 08:26:41
此文提供了代码展示烟花绽放的效果，通过css3的动画完成效
HTML
<div id="container"><div class="firework-grp"><div class="firework pos1 "><div class="drops-grp"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div><div class="drops-grp drops-grp2"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div></div><div class="firework pos2 delay1"><div class="drops-grp"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div><div class="drops-grp drops-grp2"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div></div><div class="firework pos3 delay2"><div class="drops-grp"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div><div class="drops-grp drops-grp2"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div></div><div class="firework pos4 "><div class="drops-grp"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div><div class="drops-grp drops-grp2"><span class="drop drop-1"></span><span class="drop drop-2"></span><span class="drop drop-3"></span><span class="drop drop-4"></span></div></div></div></div>
CSS
html,body{background-color: #3B3637;position: relative;width: 100%;height: 100%;}#container {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;height: 100%;}.firework-grp {display: block;width: 100%;height: 100%;position: absolute;}.firework {font-size: 10px;display: block;width: 8.5em;height: 8.5em;position: absolute;}/*位置，颜色，大小都可调*/.pos1 {left: 10%;top: 5%;color: #F44336;-webkit-transform: scale(0.5);transform: scale(0.5);}.pos2 {left: 65%;top: 10%;color: #FFC107;-webkit-transform: scale(0.6);transform: scale(0.6);}.pos3 {left: 60%;top: 35%;color: #F44336;-webkit-transform: scale(0.8);transform: scale(0.8);}.pos4 {left: 15%;top: 30%;color: #FFC107;-webkit-transform: scale(1);transform: scale(1);}/*烟花*/.drops-grp {display: block;width: 8.5em;height: 8.5em;position: absolute;}.drops-grp2 {display: block;width: 8.5em;height: 8.5em;position: absolute;-webkit-transform: rotate(45deg);transform: rotate(45deg);}.drop {display: block;width: 1em;height: 2em;overflow: hidden;position: absolute;opacity: 0;}.drop:before {content: "";display: block;width: 1em;height: 1em;background: currentColor;border-radius: 50%;}.drop:after {content: "";display: block;position: relative;top: -0.4em;width: 0;height: 0;border-top: 1.4em solid currentColor;border-left: 0.5em solid transparent;border-right: 0.5em solid transparent;}/*烟花绽放的速度，次数，方式也可以调节*/.drop-1 {left: 3.75em;top: 0;-webkit-animation: drop1anim 1.5s ease-in-out infinite;animation: drop1anim 1.5s ease-in-out infinite;}.drop-2 {top: 3.25em;right: 0;-webkit-animation: drop2anim 1.5s ease-in-out infinite;animation: drop2anim 1.5s ease-in-out infinite;}.drop-3 {left: 3.75em;bottom: 0;-webkit-animation: drop3anim 1.5s ease-in-out infinite;animation: drop3anim 1.5s ease-in-out infinite;}.drop-4 {top: 3.25em;left: 0;-webkit-animation: drop4anim 1.5s ease-in-out infinite;animation: drop4anim 1.5s ease-in-out infinite;}/*延迟时间*/.delay1 .drop {-webkit-animation-delay: 0.5s;animation-delay: 0.5s}.delay2 .drop {-webkit-animation-delay: 1s;animation-delay: 1s}/*动画*/@-webkit-keyframes drop1anim {0% {top: 3.25em;opacity: 0;-webkit-transform: scale(0.3);transform: scale(0.3);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}100% {top: -0.75em;opacity: 0;-webkit-transform: scale(0.3);transform: scale(0.3);}}@keyframes drop1anim {0% {top: 3.25em;opacity: 0;-webkit-transform: scale(0.3);transform: scale(0.3);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}100% {top: -0.75em;opacity: 0;-webkit-transform: scale(0.3);transform: scale(0.3);}}@-webkit-keyframes drop2anim {0% {right: 3.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(90deg);transform: scale(0.3) rotate(90deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(90deg);transform: scale(1) rotate(90deg);}100% {right: -0.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(90deg);transform: scale(0.3) rotate(90deg);}}@keyframes drop2anim {0% {right: 3.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(90deg);transform: scale(0.3) rotate(90deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(90deg);transform: scale(1) rotate(90deg);}100% {right: -0.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(90deg);transform: scale(0.3) rotate(90deg);}}@-webkit-keyframes drop3anim {0% {bottom: 3.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(180deg);transform: scale(0.3) rotate(180deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(180deg);transform: scale(1) rotate(180deg);}100% {bottom: -0.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(180deg);transform: scale(0.3) rotate(180deg);}}@keyframes drop3anim {0% {bottom: 3.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(180deg);transform: scale(0.3) rotate(180deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(180deg);transform: scale(1) rotate(180deg);}100% {bottom: -0.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(180deg);transform: scale(0.3) rotate(180deg);}}@-webkit-keyframes drop4anim {0% {left: 3.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(-90deg);transform: scale(0.3) rotate(-90deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(-90deg);transform: scale(1) rotate(-90deg);}100% {left: -0.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(-90deg);transform: scale(0.3) rotate(-90deg);}}@keyframes drop4anim {0% {left: 3.75em;opacity: 0;-webkit-transform: scale(0.3) rotate(-90deg);transform: scale(0.3) rotate(-90deg);}25% {opacity: 0;}50% {opacity: 1;-webkit-transform: scale(1) rotate(-90deg);transform: scale(1) rotate(-90deg);}100% {left: -0.25em;opacity: 0;-webkit-transform: scale(0.3) rotate(-90deg);transform: scale(0.3) rotate(-90deg);}}
参考文档
我的个人博客,有空来坐坐
纯css制作烟花特效相关推荐
- 纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
- 纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
- 纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效 你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...
- 纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条 效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
最新文章
- 「SAP技术」交货单发货过账报错 - Material's product unit must be entered in whole numbers - 之对策
- 鸿蒙系统系列教程5-鸿蒙开发环境的搭建
- go语言的rune类型
- wampserver3.0.6 外网 不能访问
- Windows之node.js安装
- python——asyncio模块实现协程、异步编程（三）
- 当面试官问你Vue响应式原理，你可以这么回答他
- centos php 开启mysql扩展_CentOS 7下部署php7.1和开启MySQL扩展的方法教程
- 水系图可以在哪里找_顶刊EES综述：水系锌离子电池面临的问题与机遇
- HoloLens的显示分辨率有多少？
- 拓端tecdat|R语言对混合分布中的不可观测与可观测异质性因子分析
- nginx负载php导致时间不一致,nginx – 为什么php-fpm会产生并在没有服务器负载的情况下每秒摧毁数百个孩子？...
- ToLua 入门07_GameObject
- pth(pass the hash)哈希传递攻击
- 实现WinForm的DataGridView折叠功能(非原创,仅供收藏)
- java 解析MP3
- 求s = a + aa + aaa +aaaa +……a的值
- 直播软件搭建时如何在视频通话中加入美颜处理
- QT连接MySQL数据库问题
- jQuery网格插件 ParamQuery