css3烟花效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css"> * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 32px;
background: #2C1C44;
font-family: sans-serif;
color: #FFF;
font-family: "Playfair Display", serif;
/*margin: 50px;*/
margin: 0;
overflow: hidden;
}
#container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1500px; }
#card {
text-align: center;
position: relative;
display: block;
max-width: 600px;
width: 600px;
height: 400px;
background: #3F2860;
overflow: hidden;
box-shadow: 0 0 0.5em rgba(0,0,0,0.4);
box-shadow: 0.25em 0.25em 0px 0px rgba(0, 0, 0, 0.3); transition: 0.6s;
transform-style: preserve-3d;
overflow: visible;
}
.text {
position: absolute;
top: 0;
z-index: 5;
width: 100%;
height: 100%;
color: #E49BD4;
word-wrap: break-word;
}
p {
font-weight: 400;
font-size: 1em;
}
h1 {
width: 100%;
height: 100%;
line-height: 350px;
font-size: 6em;
font-weight: 900;
position: relative;
margin: 0;
} /* FOR HOVER
---------------------------------------*/
.front, .back {
background: #3F2860;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
position: absolute;
backface-visibility: hidden;
overflow: hidden;
}
.back {
z-index:10;
transform: rotateY(180deg);
}
/*
#container:hover #card{
transform: rotateY(-180deg);
}
*/
.back p {
line-height: normal;
position: relative;
margin:0 5%;
top: 50%;
transform: translateY(-50%);
} @media only screen and (max-width: 600px) {
h1 { line-height: 175px;}
#card {
width: 300px;
height: 400px;
} }
.firework-grp {
display: block;
width: 100%;
height: 100%;
position: absolute;
color: white;
color: #535396;
}
.firework-grp2{
transform: rotate(180deg);
color: #2C1C44;
z-index: 6;
}
.firework-grp3{
transform: rotate(-75deg);
color: #E339BD;
z-index: 7;
}
.firework {
font-size: 10px;
display: block;
width: 8.5em;
height: 8.5em;
position: absolute;
} /* SIZES
------------------------------------*/
.size05 {
transform: scale(0.5);
}
.size08 {
transform: scale(0.8);
}
.size13 {
transform: scale(1.3);
}
.size15 {
transform: scale(1.5);
}
.size18 {
transform: scale(1.8);
}
.size20 {
transform: scale(2);
} /* POSITION
------------------------------------*/
.pos1 {
left: 56%;
top: 65%;
}
.pos2 {
left: 25%;
top: 15%;
}
.pos3 {
left: 50%;
top: 25%;
}
.pos4 {
left: -5%;
top: 50%;
}
.pos5 {
left: 90%;
top: 65%;
}
.pos6 {
left: 35%;
top: 75%;
}
.pos7 {
left: 5%;
top: -5%;
}
.pos8 {
left: 75%;
top: 20%;
} /* FIREWORK
------------------------------------*/
.drops-grp {
display: block;
width: 8.5em;
height: 8.5em;
position: absolute;
}
.drops-grp2 {
display: block;
width: 8.5em;
height: 8.5em;
position: absolute;
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;
animation: drop1anim 1s ease-in-out infinite;
}
.drop-2 {
top: 3.25em;
right: 0;
animation: drop2anim 1s ease-in-out infinite;
}
.drop-3 {
left:3.75em;
bottom: 0;
animation: drop3anim 1s ease-in-out infinite;
}
.drop-4 {
top: 3.25em;
left: 0;
animation: drop4anim 1s ease-in-out infinite;
}
.firework-2 .drop-1 {
animation-delay: 0.5s
}
.firework-2 .drop-2 {
animation-delay: 0.5s
}
.firework-2 .drop-3 {
animation-delay: 0.5s
}
.firework-2 .drop-4 {
animation-delay: 0.5s
} /* FIREWORK DELAY
------------------------------------*/
.delay1 .drop-1 {
animation-delay: 0.25s
}
.delay1 .drop-2 {
animation-delay: 0.25s
}
.delay1 .drop-3 {
animation-delay: 0.25s
}
.delay1 .drop-4 {
animation-delay: 0.25s
} .delay2 .drop-1 {
animation-delay: 0.75s
}
.delay2 .drop-2 {
animation-delay: 0.75s
}
.delay2 .drop-3 {
animation-delay: 0.75s
}
.delay2 .drop-4 {
animation-delay: 0.75s
} /* keyframes
------------------------------------*/
@keyframes drop1anim {
0% {
top:3.25em;
opacity: 0;
transform: scale(0.3);
}
25% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
top: -0.75em;
opacity: 0;
transform: scale(0.3);
}
}
@keyframes drop2anim {
0% {
right:3.75em;
opacity: 0;
transform: scale(0.3) rotate(90deg);
}
25% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1) rotate(90deg);
}
100% {
right: -0.25em;
opacity: 0;
transform: scale(0.3) rotate(90deg);
}
}
@keyframes drop3anim {
0% {
bottom:3.25em;
opacity: 0;
transform: scale(0.3) rotate(180deg);
}
25% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
100% {
bottom: -0.75em;
opacity: 0;
transform: scale(0.3) rotate(180deg);
}
}
@keyframes drop4anim {
0% {
left:3.75em;
opacity: 0;
transform: scale(0.3) rotate(-90deg);
}
25% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1) rotate(-90deg);
}
100% {
left: -0.25em;
opacity: 0;
transform: scale(0.3) rotate(-90deg);
}
}
</style>
</head>
<body> <div class="text">
<h1>颜色、位置、大小都是可以控制的</h1>
</div> <div class="firework-grp firework-grp2">
<div class="firework size05 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 size08 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 size15 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 class="firework size18 pos5 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 size20 pos6 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 size13 pos7">
<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 size05 pos8">
<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 class="firework-grp firework-grp3">
<div class="firework size05 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 size08 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 size15 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 class="firework size18 pos5 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 size20 pos6 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 size13 pos7">
<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 size05 pos8">
<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> <!--<div class="back"> <div class="text">
<p>Belle et heureuse année !<br>-<br>Beautiful and happy new year!</p>
</div> </div>--> </div> </div>
</body>
</html>
css3烟花效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css：一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
随机推荐
- 01-从这里开始js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jdk11下载安装及环境变量配置
jdk11下载安装及环境变量配置 官网地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-50666 ...
- OpenGL学习笔记2017/8/29
OpenGL学习日志: 感谢doing5552 的OpenGL入门学习:http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 相 ...
- iTerm2配色和去掉profile提示框
效果: 配色方案代码地址: https://github.com/mbadolato/iTerm2-Color-Schemes 点击最右边的绿色区域,再点击 “import”, 打开刚下载解压好的文 ...
- ODOO 新API修饰符
Odoo8中,API接口分为traditaional style和record style两种类型: traditional style指的就是我们在7.0中使用的类型,def(self,cr,uid ...
- 官网下载eclipse
百度搜索eclipse,点击官网链接进入官网 进入官网点击Download Packages 根据自己需要选择对应的版本 选择对应的版本进入下图下载页面,然后点击下载即可 下载完成,解压zip包即可使 ...
- HZOI2019熟练剖分(tree)
题目大意:https://www.cnblogs.com/Juve/articles/11186805.html 题解: 先给出官方题解: 其实这题跟期望没什么关系,因为E=$\sum_\limits ...
- centos 安装系列
装coreseek https://www.jb51.net/os/RedHat/462185.html 卸载mysql https://www.cnblogs.com/cyl048/p/687908 ...
- Spring MVC(三)--控制器接受普通请求参数
Spring MVC中控制器接受参数的类方式有以下几种: 普通参数:只要保证前端参数名称和传入控制器的参数名称一致即可,适合参数较少的情况: pojo类型:如果前端传的是一个pojo对象,只要保证参数 ...
- DVWA 之low级别sql注入
将Security level设为low,在左侧列表中选择“SQL Injection”,然后在右侧的“User ID”文本框中输入不同的数字就会显示相应的用户信息. 我们首先需要判断这里所传输的参数 ...