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 ...
随机推荐
- java浮点运算的陷阱
首先呢,i你要明白double和float. Inifinity: 例如:syso(5.0/0.0+" 和"+0.0 /0.0); 浮点运算的0.0不是真正意义上的0,而是非常接近 ...
- C# GDI+编程（二）
常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...
- vue：使用不同参数跳转同一组件，实现动态加载图片和数据，以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...
- 附录C 准备NCDC气象数据(加解释)
附录C 准备NCDC气象数据 这里首先简要介绍如何准备原始气象数据文件,以便我们能用Hadoop对它们进行分析.如果打算得到一份数据副本供Hadoop处理,可按照本书配套网站(网址为http://ww ...
- SpringBoot Controller接收参数的几种方式盘点
本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:SpringBoot Controller接收参数的几种方式盘点: SpringBoot Controller接收参数的几种常用方式盘点 ...
- JZOJ5870 【NOIP2018模拟9.15】地图
题目描述 Description
- CentOS设置打开终端快捷键
- jeecms 配置可以低级别用户流程
使用管理员admin登录后台,进入用户—>管理员(本站)à添加,填写用户名.密码等信息,如下图: 需要注意几个权限控制的问题: 1, 等级,值越大等级越高,等级高的管理员可以审核等级低的管理员 ...
- opencv4 java投影
工程下载 https://download.csdn.net/download/qq_16596909/11505994 比较适合与验证码的处理,毕竟八邻域降噪不能消除比较大的噪点,为了尽量减少噪点对 ...
- 【DM8168学习笔记3】CodSourcery GCC Tool Chain安装过程记录
eagle@eagle-desktop:~$ cd/home/eagle/desktop eagle@eagle-desktop:~/desktop$ cd./vboxshared eagle@eag ...