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 ...
随机推荐
- 《DSP using MATLAB》Problem 8.14
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Python学习day12-函数基础(2)
<!doctype html>day12博客 figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { pos ...
- 第一周课堂笔记5th
1. While循环机制 如何终止循环? 改变条件(根据上面的流程,只要改变条件,就会终止循环). 关键字:break. 调用系统命令:quit(),exit() 后面会讲到,不建议大家使用 ...
- Creating a bootable Ubuntu USB stick
Windows: https://tutorials.ubuntu.com/tutorial/tutorial-create-a-usb-stick-on-windows#0 Ubuntu: http ...
- Django项目：CRM(客户关系管理系统)--85--75PerfectCRM实现CRM扩展权限
# sales_urls.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.conf.urls import url from bpm. ...
- php条件语句（一）
PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...
- 转：Linux 2.4.x内核软中断机制
源地址:http://www.ibm.com/developerworks/cn/linux/kernel/interrupt/ Linux 2.4.x内核软中断机制 杨沙洲 (pubb@163.ne ...
- Python-Jsonpath简单入门
原文来自:http://goessner.net/articles/JsonPath/ JSONPath - 是xpath在json的应用. xml最大的优点就有大量的工具可以分析,转换,和选择性 ...
- 【One by one系列】一步步开始使用Redis吧(一)
One by one,一步步开始使用Redis吧(一) 最近有需求需要使用redis,之前也是随便用用,从来也没有归纳总结,今天想睡觉,但是又睡不着,外面阳光不错,气温回升了,2019年6月1日,成都 ...
- Linux内核源码真是个好东西
我突然发现,我是这么爱Linux内核源码.... 真幸福死了.... int vsprintf(char *buf, const char *fmt, va_list args) 这函数的实现 ...