css生日蛋糕烟花礼炮蜡烛祝福动画效果代码-html代码-BFW代码库

css生日蛋糕烟花礼炮蜡烛祝福动画效果代码

代码语言：html

所属分类：动画

代码描述：css生日蛋糕烟花礼炮蜡烛祝福动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");
	.mobile {
	position:fixed;
	text-align:center;
	width:100%;
	top:50px;
	font-size:90px;
	display:block;
}
h1,h2,span {
	display:none;
}
@media screen and (min-width:670px) {
	.mobile {
	display:none;
}
h1,h2,span {
	display:block;
}
body {
	background:linear-gradient(to right,#e2b8f7,#d4bafa,#c7bcfb,#b9befb,#acbff9);
	cursor:crosshair;
	perspective:1000px;
	transform-style:preserve-3d;
	font-family:"Pacifico",cursive;
}
h1 {
	position:fixed;
	text-align:center;
	width:100%;
	top:120px;
	font-size:90px;
	background:-webkit-linear-gradient(0deg,#ceadfc 0%,#a3bbfb 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	font-family:'Concert One',cursive;
	font-weight:400;
	z-index:-1;
	letter-spacing:6px;
}
span {
	position:fixed;
	text-align:center;
	width:100%;
	top:70px;
	font-size:70px;
}
h2 {
	position:fixed;
	text-align:center;
	width:100%;
	top:50px;
	font-size:90px;
	background:-webkit-linear-gradient(90deg,#e9e6ff 0%,white 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
bokeh {
	position:fixed;
	width:2vmin;
	height:2vmin;
	border-radius:50%;
	animation-name:explosion;
	animation-iteration-count:infinite;
	animation-direction:reverse;
	animation-timing-function:cubic-bezier(0.84,0.02,1,1);
}
bokeh:nth-child(1) {
	background-color:#2bd8ff;
	transform:translate(70.7404476506vw,39.2982912115vh);
	animation-duration:2.451477853s;
	animation-delay:-3.9090695973s;
}
bokeh:nth-child(2) {
	background-color:#feff28;
	transform:translate(21.390916309vw,83.9320950239vh);
	animation-duration:2.6082661613s;
	animation-delay:-2.4177632704s;
}
bokeh:nth-child(3) {
	background-color:#feff28;
	transform:translate(99.4707896083vw,50.8779038063vh);
	animation-duration:2.3934609219s;
	animation-delay:-4.9374235187s;
}
bokeh:nth-child(4) {
	background-color:#ef8d22;
	transform:translate(88.0762428158vw,60.8758646268vh);
	animation-duration:4.3745762554s;
	animation-delay:-4.2335574629s;
}
bokeh:nth-child(5) {
	background-color:#feff28;
	transform:translate(87.209776097vw,87.4722435411vh);
	animation-duration:2.6247180243s;
	animation-delay:-0.3571633852s;
}
bokeh:nth-child(6) {
	background-color:#feff28;
	transform:translate(67.5348277973vw,93.8934516001vh);
	animation-duration:3.0630744908s;
	animation-delay:-4.4890304964s;
}
bokeh:nth-child(7) {
	background-color:#feff28;
	transform:translate(51.2278043561vw,39.0030857051vh);
	animation-duration:3.1065374294s;
	animation-delay:-4.5619134997s;
}
bokeh:nth-child(8) {
	background-color:#fc85e1;
	transform:translate(63.2547804674vw,88.7449965817vh);
	animation-duration:2.8384921355s;
	animation-delay:-0.0965491775s;
}
bokeh:nth-child(9) {
	background-color:#fc85e1;
	transform:translate(1.7747115187vw,78.6520215079vh);
	animation-duration:4.3100039072s;
	animation-delay:-0.553894004s;
}
bokeh:nth-child(10) {
	background-color:#ef8d22;
	transform:translate(61.1915375825vw,46.9592056036vh);
	animation-duration:2.6244512022s;
	animation-delay:-4.5897035553s;
}
bokeh:nth-child(11) {
	background-color:#ef8d22;
	transform:translate(4.3118502657vw,31.3689335931vh);
	animation-duration:2.9020870937s;
	animation-delay:-0.0475365525s;
}
bokeh:nth-child(12) {
	background-color:#fc85e1;
	transform:translate(11.7124176675vw,39.3853134156vh);
	animation-duration:2.7165067308s;
	.........完整代码请登录后点击上方下载按钮下载查看