<!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烟花效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Hover.css:一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  5. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. 05_jQuery对象初识(三)登录案例

    1.案例需求:点击登录按钮验证用户名和密码都不为空,为空就在对应的input标签下面显示一个错误的提示信息. 1.给登录的按钮绑定点击事件 2.点击事件要做的事情 1.找到input标签.取值.判断是 ...

  2. fstream文件打开模式

    fstream:对于文件的操作很久两年前就开始使用了,但是仅仅为了达到满足自己需求的目的,就是要么是写,要么是读.从来没有对其进行详细的了解.自己也曾经想过花一点时间去总结一下,这个东西到底应该怎么用 ...

  3. innodb状态

    Innodb_buffer_pool_pages_data Innodb buffer pool缓存池中包含数据的页的数目,包括脏页.单位是page. Innodb_buffer_pool_pages ...

  4. Makefile知识点

    1.标准Makefile文件示例如下: #把.o .C .cxx .cpp .hxx .h添加到后缀列表中. .SUFFIXES: .o .C .cxx .cpp .hxx .h #设置变量并赋值,方 ...

  5. Vue实例属性/方法/生命周期

    一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...

  6. js获取url链接中的域名部分

    用js提取出url中的域名(domain)部分,用split()函数就可以了. 因为一个正确的url必定是由http://或者是https://.domain.路径/参数组成,所以可以用split以/ ...

  7. Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---观察者模式之WeatherReport[转]

      1   2{<HeadFirst设计模式>之观察者模式 }   3{ 主题与观察者                    }   4{ 编译工具 :Delphi7.0          ...

  8. springboot核心技术(四)-----Docker、数据访问、自定义starter

    Docker 1.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术: Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使 用这个镜 ...

  9. R语言画图教程之盒形图

    R语言画图教程之盒形图 我们之前有分享过一系列的R语言画图代码(PCA图.Pathway图.火山图.RDA图.热图),今天再来补充一个盒形图(箱形图)的代码. 以下代码只是示例,不能直接搬来用哦,注意 ...

  10. 移动端iPhone系列适配问题

    问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appear ...