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

代码语言：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;
	animation-delay:-0.3402677425s;
}
bokeh:nth-child(13) {
	background-color:#fc85e1;
	transform:translate(94.2835231134vw,15.247368654vh);
	animation-duration:3.1761028617s;
	animation-delay:-4.3999397039s;
}
bokeh:nth-child(14) {
	background-color:#ef8d22;
	transform:translate(22.7721270307vw,68.9730094645vh);
	animation-duration:3.6217481701s;
	animation-delay:-4.3121585024s;
}
bokeh:nth-child(15) {
	background-color:#2bd8ff;
	transform:translate(82.1182207545vw,11.2392421851vh);
	animation-duration:3.4960993434s;
	animation-delay:-3.7739573258s;
}
bokeh:nth-child(16) {
	background-color:#2bd8ff;
	transform:translate(19.7968006723vw,77.2717558727vh);
	animation-duration:3.1354637591s;
	animation-delay:-2.8370634184s;
}
bokeh:nth-child(17) {
	background-color:#feff28;
	transform:translate(84.4109063964vw,23.5168492096vh);
	animation-duration:4.3723964886s;
	animation-delay:-1.7390935649s;
}
bokeh:nth-child(18) {
	background-color:#fc85e1;
	transform:translate(72.7671083205vw,62.5592027903vh);
	animation-duration:4.4313534479s;
	animation-delay:-3.0082038529s;
}
bokeh:nth-child(19) {
	background-color:#2bd8ff;
	transform:translate(79.3141365436vw,1.3143345978vh);
	animation-duration:2.392781523s;
	animation-delay:-0.261672225s;
}
bokeh:nth-child(20) {
	background-color:#ef8d22;
	transform:translate(29.2041570725vw,86.8219678576vh);
	animation-duration:3.7180833613s;
	animation-delay:-1.7317238209s;
}
bokeh:nth-child(21) {
	background-color:#2bd8ff;
	transform:translate(72.3682688076vw,29.3261143931vh);
	animation-duration:3.5629502006s;
	animation-delay:-4.5261179684s;
}
bokeh:nth-child(22) {
	background-color:#2bd8ff;
	transform:translate(41.7909696011vw,5.9456249418vh);
	animation-duration:2.7586444687s;
	animation-delay:-1.2172526656s;
}
bokeh:nth-child(23) {
	background-color:#feff28;
	transform:translate(76.2571451639vw,17.195474965vh);
	animation-duration:4.4228449437s;
	animation-delay:-0.4973092974s;
}
bokeh:nth-child(24) {
	background-color:#2bd8ff;
	transform:translate(64.8267410528vw,72.3685961754vh);
	animation-duration:4.0308729373s;
	animation-delay:-3.4748753047s;
}
bokeh:nth-child(25) {
	background-color:#feff28;
	transform:translate(51.9640189709vw,48.6043629666vh);
	animation-duration:3.1974276784s;
	animation-delay:-1.6166953152s;
}
bokeh:nth-child(26) {
	background-color:#ef8d22;
	transform:translate(41.1498699458vw,47.5398372353vh);
	animation-duration:4.8552340393s;
	animation-delay:-0.9697552189s;
}
bokeh:nth-child(27) {
	background-color:#2bd8ff;
	transform:translate(81.3954514701vw,46.9511786798vh);
	animation-duration:2.767644001s;
	animation-delay:-2.7950220038s;
}
bokeh:nth-child(28) {
	background-color:#ef8d22;
	transform:translate(75.1070545511vw,54.2036989448vh);
	animation-duration:4.7036199387s;
	animation-delay:-1.0505926433s;
}
bokeh:nth-child(29) {
	background-color:#fc85e1;
	transform:translate(25.2485702636vw,35.8851684261vh);
	animation-duration:3.7316305594s;
	animation-delay:-1.828910888s;
}
bokeh:nth-child(30) {
	background-color:#2bd8ff;
	transform:translate(33.607420868vw,8.2345981698vh);
	animation-duration:2.7029717368s;
	animation-delay:-2.5500282063s;
}
bokeh:nth-child(31) {
	background-color:#fc85e1;
	transform:translate(4.5567738711vw,26.915212362vh);
	animation-duration:3.4355180075s;
	animation-delay:-0.5790819766s;
}
bokeh:nth-child(32) {
	background-color:#feff28;
	transform:translate(25.9501588313vw,20.9473646869vh);
	animation-duration:4.3830077577s;
	animation-delay:-4.6564701835s;
}
bokeh:nth-child(33) {
	background-color:#feff28;
	transform:translate(90.303759829vw,29.6733774558vh);
	animation-duration:2.6689654722s;
	animation-delay:-0.9045308203s;
}
bokeh:nth-child(34) {
	background-color:#2bd8ff;
	transform:translate(89.2836951603vw,26.5025411567vh);
	animation-duration:2.6426834256s;
	animation-delay:-4.8319924428s;
}
bokeh:nth-child(35) {
	background-color:#ef8d22;
	transform:translate(49.6593402454vw,41.2989731288vh);
	animation-duration:2.53627768s;
	animation-delay:-1.6992049899s;
}
bokeh:nth-child(36) {
	background-color:#ef8d22;
	transform:translate(55.3578105489vw,75.1503457961vh);
	animation-duration:2.9803742064s;
	animation-delay:-3.860230436s;
}
bokeh:nth-child(37) {
	background-color:#feff28;
	transform:translate(84.2137545181vw,99.6489820089vh);
	animation-duration:2.8525129053s;
	animation-delay:-1.909336042s;
}
bokeh:nth-child(38) {
	background-color:#feff28;
	transform:translate(58.4226829219vw,6.6082231423vh);
	animation-duration:4.1724251653s;
	animation-delay:-2.5373921442s;
}
bokeh:nth-child(39) {
	background-color:#2bd8ff;
	transform:translate(4.1325762908vw,16.5826905712vh);
	animation-duration:3.3196820224s;
	animation-delay:-0.1998524335s;
}
bokeh:nth-child(40) {
	background-color:#ef8d22;
	transform:translate(38.1082612566vw,99.6828149038vh);
	animation-duration:2.4716860672s;
	animation-delay:-3.804687821s;
}
bokeh:nth-child(41) {
	background-color:#ef8d22;
	transform:translate(80.1246196199vw,23.2154454066vh);
	animation-duration:3.9966714491s;
	animation-delay:-3.2041854036s;
}
bokeh:nth-child(42) {
	background-color:#2bd8ff;
	transform:translate(12.4867607956vw,81.990153671vh);
	animation-duration:4.3771268993s;
	animation-delay:-2.9204017862s;
}
bokeh:nth-child(43) {
	background-color:#feff28;
	transform:translate(88.4304689846vw,21.1509289349vh);
	animation-duration:2.4345176476s;
	animation-delay:-1.7879472609s;
}
bokeh:nth-child(44) {
	background-color:#fc85e1;
	transform:translate(69.7647889352vw,45.9607535566vh);
	animation-duration:4.3935398987s;
	animation-delay:-3.4611102331s;
}
bokeh:nth-child(45) {
	background-color:#ef8d22;
	transform:translate(61.1024281766vw,8.6360893002vh);
	animation-duration:3.7418427756s;
	animation-delay:-0.8676250685s;
}
bokeh:nth-child(46) {
	background-color:#2bd8ff;
	transform:translate(3.2214371062vw,25.2935105902vh);
	animation-duration:3.074683766s;
	animation-delay:-0.4965853318s;
}
bokeh:nth-child(47) {
	background-color:#feff28;
	transform:translate(74.1716691607vw,3.1894365936vh);
	animation-duration:4.4907628187s;
	animation-delay:-2.968930085s;
}
bokeh:nth-child(48) {
	background-color:#fc85e1;
	transform:translate(71.7485884871vw,81.5140808668vh);
	animation-duration:4.6478212704s;
	animation-delay:-2.4913789916s;
}
bokeh:nth-child(49) {
	background-color:#ef8d22;
	transform:translate(68.5706834892vw,26.9999891094vh);
	animation-duration:4.4816990552s;
	animation-delay:-4.3381289066s;
}
bokeh:nth-child(50) {
	background-color:#ef8d22;
	transform:translate(41.4062073866vw,53.7404657598vh);
	animation-duration:3.4662897168s;
	animation-delay:-3.0623966223s;
}
bokeh:nth-child(51) {
	background-color:#ef8d22;
	transform:translate(87.7275522899vw,57.8586420239vh);
	animation-duration:4.5492821401s;
	animation-delay:-3.9375445372s;
}
bokeh:nth-child(52) {
	background-color:#fc85e1;
	transform:translate(98.2142162683vw,57.3579443658vh);
	animation-duration:2.8023852526s;
	animation-delay:-2.8018360542s;
}
bokeh:nth-child(53) {
	background-color:#ef8d22;
	transform:translate(58.9158153095vw,2.5851120782vh);
	animation-duration:4.8828427898s;
	animation-delay:-4.0170178676s;
}
bokeh:nth-child(54) {
	background-color:#feff28;
	transform:translate(21.8232629797vw,30.541333487vh);
	animation-duration:4.1215064165s;
	animation-delay:-1.7175877986s;
}
bokeh:nth-child(55) {
	background-color:#fc85e1;
	transform:translate(13.5806715283vw,97.9236982484vh);
	animation-duration:3.5107176799s;
	animation-delay:-2.201395581s;
}
bokeh:nth-child(56) {
	background-color:#feff28;
	transform:translate(14.4730253941vw,70.3026987242vh);
	animation-duration:2.8655370997s;
	animation-delay:-4.5406682184s;
}
bokeh:nth-child(57) {
	background-color:#feff28;
	transform:translate(8.9309655313vw,17.5932162599vh);
	animation-duration:3.8738411593s;
	animation-delay:-0.7726217596s;
}
bokeh:nth-child(58) {
	background-color:#fc85e1;
	transform:translate(37.5050301898vw,74.5977925362vh);
	animation-duration:2.8543587537s;
	animation-delay:-0.6382727009s;
}
bokeh:nth-child(59) {
	background-color:#fc85e1;
	transform:translate(44.1369706808vw,19.0224357251vh);
	animation-duration:3.4677241213s;
	animation-delay:-0.3790625881s;
}
bokeh:nth-child(60) {
	background-color:#ef8d22;
	transform:translate(89.9172143086vw,60.5.........完整代码请登录后点击上方下载按钮下载查看