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 ...
随机推荐
- Chapter 3 树与二叉树
Chapter 3 树与二叉树 1- 二叉树 主要性质: 1 叶子结点数 = 度为2的结点数 + 1 2 二叉树第i层上最多有 (i≥1)个结点 3 深度为k的二叉树最多有 个结点 ...
- JS 日期比较
Js 日期比较方法 第一种方式 function compareDate(s1,s2){ return ((new Date(s1.replace(/-/g,"\/")))> ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- oauth2使用心得-----基本概念以及认证服务器搭建
应用场景 我们假设你有一个“云笔记”产品,并提供了“云笔记服务”和“云相册服务”,此时用户需要在不同的设备(PC.Android.iPhone.TV.Watch)上去访问这些“资源”(笔记,图片) 那 ...
- 2018-8-10-WPF-使用不安全代码快速从数组转-WriteableBitmap
title author date CreateTime categories WPF 使用不安全代码快速从数组转 WriteableBitmap lindexi 2018-08-10 19:16:5 ...
- LA5713 Qin Shi Huang's National Road System
题目大意:秦始皇要在n个城市之间修筑一条道路使得任意两个城市均可连通.有个道士可以用法力帮忙修一条路.秦始皇希望其他的道路总长B最短且用法术连接的两个城市的人口之和A尽量大,因此下令寻找一个A / B ...
- MySQL8.0.17 - Multi-Valued Indexes 简述
本文主要简单介绍下8.0.17新引入的功能multi-valued index, 顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支 ...
- 手机前端开发调试利器-vConsole
最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...
- windows 和 mac 文件夹共享问题汇总
目标:windows上的文件夹,共享给MAC,mac可以将文件复制到windows上来 windows设置共享文件夹,然后在mac上访问 假设win的ip地址是10.10.27.11,则mac上远程方 ...
- ubuntu查看并杀死进程
Ubuntu 查看和杀死进程 今天在netbeans中关闭webrick时,发现没有关闭掉,打入localhost:3000 依然显示页面,发现无法从nb中再次关闭 只有进入ubuntu的进程下关闭 ...