CSS3实现烟花特效 --web前端

烟花特效,比较简单,直接贴代码了……

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3实现烟花特效</title>
<style>
* {
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
#fireworks{
position: absolute;
left: 50%;
margin-left: -250px;
bottom: 60%;
margin-bottom: -180px;
transform: scale(0);
animation: fireworks 5s 3s;
}

@keyframes fireworks {
0%{
transform: scale(0);
}
80%{
transform: scale(1);
}
100%{
opacity: 0;
}
}
#firecracker{
position: absolute;
left: 50%;
bottom: 0%;
margin-left: -4px;
animation: firecracker 3s forwards;
}

@keyframes firecracker {
0%{
transform: scale(1);
bottom: 0%;
}
100%{
bottom: 60%;
transform: scale(0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="fireworks"><img src="imgs/fireworks.png" alt=""></div>
<div id="firecracker"><img src="imgs/firecracker.png" alt="" width="8px"></div>
</div>
</body>
</html>

素材:demo.zip

 

本文转载于:猿2048➬https://www.mk2048.com/blog/blog.php?id=10h2j0j&title=CSS3实现烟花特效 --web前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机 java 开发_深入浅出 Java 虚拟机 · 通往高级 Java 开发的必经之路

第一章 JVM 内存模型Java 虚拟机(Java Virtual MachineJVM)的内存空间分为五个部分&#xff0c;分别是&#xff1a;程序计数器Java 虚拟机栈本地方法栈堆方法区。下面对这五个区域展开深入的介绍。1.1 程序计数器1.1.1 什么是程序计数器&#xff1f;程序计数器是一块较小的内存…

java.lang.ClassNotFoundException:如何解决

本文适用于当前面临java.lang.ClassNotFoundException挑战的Java初学者。 它将为您提供此常见Java异常的概述&#xff0c;这是一个示例Java程序&#xff0c;可支持您的学习过程和解决策略。 如果您对与更高级的类加载器相关的问题感兴趣&#xff0c;我建议您复习有关java.lang…

iOS10 App跳转到系统设置

实现类似万能钥匙中点击一个Wi-Fi跳转到系统Wi-Fi设置界面的功能。 NSString * urlString "App-Prefs:rootWIFI";if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:urlString]]) {if ([[UIDevice currentDevice].systemVersion doubleValue…

python生成器 图片分类_python批量处理图片图片Python迭代器和生成器介绍

Python迭代器和生成器介绍迭代器迭代器是一个实现了迭代器协议的对象&#xff0c;Python中的迭代器协议就是有next方法的对象会前进到下一结果&#xff0c;而在一系列结果的末尾是&#xff0c;则会引发StopIteration。在for循环中&#xff0c;Python将自动调用工厂函数iter()获…

Java-IO流之BufferedReader 和BufferedWriter的使用和原理

BufferedReader和BufferedWriter出现的目的是为了对FileReader以及FileWriter的读写操作进行增强&#xff0c;而怎么增强呢&#xff0c;原理类似于使用StringBuilder&#xff0c;是把数据先放入他们的一个char数组中&#xff0c;然后再操作char数组。 使用缓冲区的字符流是使用…

小程序实践(三):九宫格实现及item跳转

效果图&#xff1a; 实现效果图红色线包含部分的九宫格效果&#xff0c;并附带item点击时间。 ------------------------------------------------------------------------------------------------------ 具体实现&#xff1a; 1、首先添加图片资源文件 在项目根目录新建一个…

用JavaFX编写图块引擎

随着JavaFX嵌入式版本的问世&#xff0c;我们的框架对于游戏开发变得越来越有趣&#xff0c;因为我们现在可以瞄准平板电脑和智能手机等小型消费类设备。 因此&#xff0c;我决定对JavaFX进行更多的游戏编写实验。 这次&#xff0c;我想使用Canvas对渲染进行更多控制&#xff0…

python命令行运行模式_[Python] 命令行模式阅读博客园的博文

1 #-*- coding:UTF-8 -*-2 importrequests3 from lxml importetree4 importsys5 importio6 importos789 sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodinggb18030)101112 classCnBlogs:13 """"14 Auth&#xff1a;reader15 发表地址&#xff1a;…

HTML5--应用网页模板

因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100 ,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家看了,能对你们有所帮助 1.先给大家看看效果图,好让大家有点兴趣 2.大家再来…

企业集成模式简介

在此博客文章中&#xff0c;我们将介绍一些企业集成模式。 这些是旨在解决集成挑战的已知设计模式。 阅读此书后&#xff0c;您将可以设计集成解决方案。 EIP&#xff08;简而言之&#xff09;是已知的设计模式&#xff0c;可为应用程序集成过程中遇到的问题/问题提供解决方案…

手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

转载自&#xff1a;http://www.ljwit.com/archives/php/278.html 说明&#xff1a; Postman不多介绍&#xff0c;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。本文主要介绍下安装过程。 本文使用的是解压文件直接进行安装。是比较快速有效的安装方式&#xff0c;…

C语言博客作业--数据类型

题目1&#xff1a;7-4 打印菱形图案 1. 本题PTA提交列表 2. 设计思路 1.定义变量i,j,k,n;且声明i为要打印的行数&#xff0c;j是控制输出打印空格和星星&#xff0c;n是菱形为菱形的高 2.输入n 3.i1&#xff0c;j1 4.先打印上半部分&#xff0c;第一行到n/21行&#xff0c;输出…

信息隐藏将txt文件合并到jpg文件中_使用Kali Linux在图像内隐藏机密消息—可在任何Linux发行版使用

欢迎回到“Esn技术社区”&#xff01;今天&#xff0c;我们将演示如何使用Steghide(一种可在Kali Linux上使用的流行隐写工具)在图像内隐藏消息。在计算机科学中&#xff0c;将信息隐藏在文件内(例如图像&#xff0c;文档&#xff0c;程序&#xff0c;有用数据&#xff0c;消息…

Spring 3.1,Cloud Foundry和本地开发

这篇文章将帮助您在Cloud Foundry上使用MongoDB构建Spring 3.1 Web应用程序。 除了推动Cloud Foundry之外&#xff0c;您还可以使用MongoDB实例在本地环境中进行开发。 目标 此博客发布的目标是在本地构建应用程序&#xff0c;然后发布到本地Cloud Foundry实例。 我们将利用C…

Spring MVC 简述:从MVC框架普遍关注的问题说起

任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题&#xff0c;比如请求的收集与分发、数据前后台流转与转换&#xff0c;当前最流行的SpringMVC和Struts2也不例外。本文首先概述MVC模式的分层思想与MVC框架普遍关注的问题&#xff0c;并以此为契机结合SpringMVC的…

java方法调用机制_Java方法调用机制 - osc_bkdv2it5的个人空间 - OSCHINA - 中文开源技术交流社区...

最近在编程时&#xff0c;修改方法传入对象的对象引用&#xff0c;并没有将修改反映到调用方法中。奇怪为什么结果没有变化&#xff0c;原因是遗忘了Java对象引用和内存分配机制。本文介绍3个点&#xff1a;① 该问题举例说明② 简要阐述Java内存区域③ 介绍JVM中方法调用的机制…

CSS染色图标(图片)

之前一直以为用background引入的图标无法染色&#xff08;非字体图标&#xff09;&#xff0c;现在才知道有黑科技可以用&#xff0c;就是利用drop-shadow。 代码示例 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"&…

eclipse安装java web插件

1 查看eclipse版本 找到eclipse的安装目录&#xff0c;找到readme文件&#xff0c;打开其中的html文件&#xff0c;我的是4.6版本的,代号是oxygen 2 安装 打开eclipse,点击help-Install new software-单击add&#xff0c;在弹出窗口中输入网址&#xff1a; http://download.ecl…

python正则表达式指南_Python正则表达式指南

1. 正则表达式基础1.1. 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具&#xff0c;拥有自己独特的语法以及一个独立的处理引擎&#xff0c;效率上可能不如str自带的方法&#xff0c;但功能十分强大。得益于这一点&#xff0c;在提供了正则表达…

Google Guava EventBus用于事件编程

在任何软件应用程序中都是如此&#xff0c;有些对象需要共享信息才能完成工作。 在Java应用程序中&#xff0c;实现信息共享的一种方法是拥有事件侦听器&#xff0c;其唯一目的是在发生所需事件时采取某些措施。 在大多数情况下&#xff0c;此过程有效&#xff0c;并且最有经验…