生日送什么礼物总是要花一番心思，别出心裁不落俗套，什么礼物才能让那一个她开心呢？来看看前端大大用html+css实现动态生日快乐代码吧，亲测可用。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-">
<title>Happy Birthday!</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");
.mobile {
position: fixed;
text-align: center;
width:%;
top:px;
font-size:px;
display: block;
}
h, h2, span {
display: none;
}
@media screen and (min-width:px) {
.mobile {
display: none;
}
h, h2, span {
display: block;
}
body {
background: linear-gradient(to right, #eb8f7, #d4bafa, #c7bcfb, #b9befb, #acbff9);
cursor: crosshair;
perspective:px;
transform-style: preserve-d;
font-family: "Pacifico",cursive;
}
h {
position: fixed;
text-align: center;
width:%;
top:px;
font-size:px;
background: -webkit-linear-gradient(deg, #ceadfc 0%, #a3bbfb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Concert One', cursive;
font-weight:;
z-index: -;
letter-spacing:px;
}
span {
position: fixed;
text-align: center;
width:%;
top:px;
font-size:px;
}
h {
position: fixed;
text-align: center;
width:%;
top:px;
font-size:px;
background: -webkit-linear-gradient(deg, #e9e6ff 0%, white 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
bokeh {
position: fixed;
width:vmin;
height:vmin;
border-radius:%;
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: cubic-bezier(.84, 0.02, 1, 1);
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.7404476506vw, 39.2982912115vh);
animation-duration:.451477853s;
animation-delay: -.9090695973s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.390916309vw, 83.9320950239vh);
animation-duration:.6082661613s;
animation-delay: -.4177632704s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.4707896083vw, 50.8779038063vh);
animation-duration:.3934609219s;
animation-delay: -.9374235187s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.0762428158vw, 60.8758646268vh);
animation-duration:.3745762554s;
animation-delay: -.2335574629s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.209776097vw, 87.4722435411vh);
animation-duration:.6247180243s;
animation-delay: -.3571633852s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.5348277973vw, 93.8934516001vh);
animation-duration:.0630744908s;
animation-delay: -.4890304964s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.2278043561vw, 39.0030857051vh);
animation-duration:.1065374294s;
animation-delay: -.5619134997s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2547804674vw, 88.7449965817vh);
animation-duration:.8384921355s;
animation-delay: -.0965491775s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7747115187vw, 78.6520215079vh);
animation-duration:.3100039072s;
animation-delay: -.553894004s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1915375825vw, 46.9592056036vh);
animation-duration:.6244512022s;
animation-delay: -.5897035553s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.3118502657vw, 31.3689335931vh);
animation-duration:.9020870937s;
animation-delay: -.0475365525s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7124176675vw, 39.3853134156vh);
animation-duration:.7165067308s;
animation-delay: -.3402677425s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2835231134vw, 15.247368654vh);
animation-duration:.1761028617s;
animation-delay: -.3999397039s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.7721270307vw, 68.9730094645vh);
animation-duration:.6217481701s;
animation-delay: -.3121585024s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.1182207545vw, 11.2392421851vh);
animation-duration:.4960993434s;
animation-delay: -.7739573258s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.7968006723vw, 77.2717558727vh);
animation-duration:.1354637591s;
animation-delay: -.8370634184s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.4109063964vw, 23.5168492096vh);
animation-duration:.3723964886s;
animation-delay: -.7390935649s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7671083205vw, 62.5592027903vh);
animation-duration:.4313534479s;
animation-delay: -.0082038529s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.3141365436vw, 1.3143345978vh);
animation-duration:.392781523s;
animation-delay: -.261672225s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.2041570725vw, 86.8219678576vh);
animation-duration:.7180833613s;
animation-delay: -.7317238209s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.3682688076vw, 29.3261143931vh);
animation-duration:.5629502006s;
animation-delay: -.5261179684s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.7909696011vw, 5.9456249418vh);
animation-duration:.7586444687s;
animation-delay: -.2172526656s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.2571451639vw, 17.195474965vh);
animation-duration:.4228449437s;
animation-delay: -.4973092974s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.8267410528vw, 72.3685961754vh);
animation-duration:.0308729373s;
animation-delay: -.4748753047s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.9640189709vw, 48.6043629666vh);
animation-duration:.1974276784s;
animation-delay: -.6166953152s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1498699458vw, 47.5398372353vh);
animation-duration:.8552340393s;
animation-delay: -.9697552189s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.3954514701vw, 46.9511786798vh);
animation-duration:.767644001s;
animation-delay: -.7950220038s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1070545511vw, 54.2036989448vh);
animation-duration:.7036199387s;
animation-delay: -.0505926433s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2485702636vw, 35.8851684261vh);
animation-duration:.7316305594s;
animation-delay: -.828910888s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.607420868vw, 8.2345981698vh);
animation-duration:.7029717368s;
animation-delay: -.5500282063s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.5567738711vw, 26.915212362vh);
animation-duration:.4355180075s;
animation-delay: -.5790819766s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.9501588313vw, 20.9473646869vh);
animation-duration:.3830077577s;
animation-delay: -.6564701835s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.303759829vw, 29.6733774558vh);
animation-duration:.6689654722s;
animation-delay: -.9045308203s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.2836951603vw, 26.5025411567vh);
animation-duration:.6426834256s;
animation-delay: -.8319924428s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.6593402454vw, 41.2989731288vh);
animation-duration:.53627768s;
animation-delay: -.6992049899s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.3578105489vw, 75.1503457961vh);
animation-duration:.9803742064s;
animation-delay: -.860230436s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.2137545181vw, 99.6489820089vh);
animation-duration:.8525129053s;
animation-delay: -.909336042s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.4226829219vw, 6.6082231423vh);
animation-duration:.1724251653s;
animation-delay: -.5373921442s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.1325762908vw, 16.5826905712vh);
animation-duration:.3196820224s;
animation-delay: -.1998524335s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1082612566vw, 99.6828149038vh);
animation-duration:.4716860672s;
animation-delay: -.804687821s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1246196199vw, 23.2154454066vh);
animation-duration:.9966714491s;
animation-delay: -.2041854036s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.4867607956vw, 81.990153671vh);
animation-duration:.3771268993s;
animation-delay: -.9204017862s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.4304689846vw, 21.1509289349vh);
animation-duration:.4345176476s;
animation-delay: -.7879472609s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7647889352vw, 45.9607535566vh);
animation-duration:.3935398987s;
animation-delay: -.4611102331s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1024281766vw, 8.6360893002vh);
animation-duration:.7418427756s;
animation-delay: -.8676250685s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.2214371062vw, 25.2935105902vh);
animation-duration:.074683766s;
animation-delay: -.4965853318s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.1716691607vw, 3.1894365936vh);
animation-duration:.4907628187s;
animation-delay: -.968930085s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7485884871vw, 81.5140808668vh);
animation-duration:.6478212704s;
animation-delay: -.4913789916s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.5706834892vw, 26.9999891094vh);
animation-duration:.4816990552s;
animation-delay: -.3381289066s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.4062073866vw, 53.7404657598vh);
animation-duration:.4662897168s;
animation-delay: -.0623966223s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.7275522899vw, 57.8586420239vh);
animation-duration:.5492821401s;
animation-delay: -.9375445372s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2142162683vw, 57.3579443658vh);
animation-duration:.8023852526s;
animation-delay: -.8018360542s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.9158153095vw, 2.5851120782vh);
animation-duration:.8828427898s;
animation-delay: -.0170178676s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.8232629797vw, 30.541333487vh);
animation-duration:.1215064165s;
animation-delay: -.7175877986s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.5806715283vw, 97.9236982484vh);
animation-duration:.5107176799s;
animation-delay: -.201395581s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.4730253941vw, 70.3026987242vh);
animation-duration:.8655370997s;
animation-delay: -.5406682184s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.9309655313vw, 17.5932162599vh);
animation-duration:.8738411593s;
animation-delay: -.7726217596s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.5050301898vw, 74.5977925362vh);
animation-duration:.8543587537s;
animation-delay: -.6382727009s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.1369706808vw, 19.0224357251vh);
animation-duration:.4677241213s;
animation-delay: -.3790625881s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.9172143086vw, 60.5896372203vh);
animation-duration:.2591286422s;
animation-delay: -.3436293949s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.129997629vw, 57.7175593668vh);
animation-duration:.3394070906s;
animation-delay: -.2058207724s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.6094040216vw, 64.6028247058vh);
animation-duration:.7708027023s;
animation-delay: -.3248560361s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.4935870167vw, 49.1580693638vh);
animation-duration:.0753471222s;
animation-delay: -.1042384607s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.4229799547vw, 14.4558125829vh);
animation-duration:.6042743538s;
animation-delay: -.5068368619s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.1752717226vw, 44.959300202vh);
animation-duration:.7140677085s;
animation-delay: -.1288509334s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.8734263303vw, 94.391925096vh);
animation-duration:.5332114735s;
animation-delay: -.9163200431s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.8655189976vw, 86.980092905vh);
animation-duration:.3004360444s;
animation-delay: -.2638107753s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.900688433vw, 44.1486399622vh);
animation-duration:.5713456324s;
animation-delay: -.6496695177s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.5673498579vw, 22.4102469728vh);
animation-duration:.5195536497s;
animation-delay: -.4477867877s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.1928628475vw, 56.5732657592vh);
animation-duration:.2452477565s;
animation-delay: -.784497837s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.2490898496vw, 28.0060803314vh);
animation-duration:.4738318304s;
animation-delay: -.2575550351s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.5206781163vw, 98.1803905721vh);
animation-duration:.4299041867s;
animation-delay: -.6544913646s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.3800457033vw, 87.8857972808vh);
animation-duration:.1543860283s;
animation-delay: -.5361790929s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.2022983803vw, 53.6621206454vh);
animation-duration:.5498075114s;
animation-delay: -.622928478s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.4792038272vw, 49.9574099775vh);
animation-duration:.3023511502s;
animation-delay: -.5662268689s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.8566584025vw, 62.4294941633vh);
animation-duration:.0488542535s;
animation-delay: -.2247802825s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.2082016768vw, 31.510327441vh);
animation-duration:.3263311044s;
animation-delay: -.8680742107s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.5195887397vw, 10.3731475626vh);
animation-duration:.2409467825s;
animation-delay: -.7158376764s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.3099737688vw, 98.3753373411vh);
animation-duration:.5537973442s;
animation-delay: -.63998392s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.5967388759vw, 14.9299043275vh);
animation-duration:.8098590221s;
animation-delay: -.4370859968s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.1223777298vw, 70.1971631522vh);
animation-duration:.2838589963s;
animation-delay: -.7401444523s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.1015262739vw, 81.3441360981vh);
animation-duration:.2939592107s;
animation-delay: -.9150983315s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7106752653vw, 36.7850329091vh);
animation-duration:.8849572533s;
animation-delay: -.6034485131s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.8717119902vw, 89.8137587323vh);
animation-duration:.4917909367s;
animation-delay: -.6839290268s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2928640388vw, 75.8426881671vh);
animation-duration:.1987712966s;
animation-delay: -.7031902792s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.0682843643vw, 18.2581374607vh);
animation-duration:.8925956423s;
animation-delay: -.0572694348s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.0707981851vw, 48.7661464606vh);
animation-duration:.6026617399s;
animation-delay: -.8628976688s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.8052009135vw, 3.1629584265vh);
animation-duration:.9945698031s;
animation-delay: -.2234605093s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.1542426485vw, 6.2335870209vh);
animation-duration:.2101759535s;
animation-delay: -.3446493263s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.1752701425vw, 47.3028980994vh);
animation-duration:.7706786674s;
animation-delay: -.1945484167s;
}
bokeh:nth-child() {
background-color: #bd8ff;
transform: translate(.3680183118vw, 70.2328105992vh);
animation-duration:.9905256372s;
animation-delay: -.3445529913s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.1140237902vw, 90.0487890223vh);
animation-duration:.8901112768s;
animation-delay: -.6312829089s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.8479180254vw, 50.5459436949vh);
animation-duration:.0763765466s;
animation-delay: -.2578885579s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.6698287233vw, 25.3724994599vh);
animation-duration:.3036069206s;
animation-delay: -.4809995763s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.2976851652vw, 47.9411811828vh);
animation-duration:.0118610481s;
animation-delay: -.5248562455s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.9679535656vw, 74.256254716vh);
animation-duration:.4959949039s;
animation-delay: -.4307375377s;
}
bokeh:nth-child() {
background-color: #feff;
transform: translate(.0090368657vw, 87.5674469503vh);
animation-duration:.1309873931s;
animation-delay: -.9910336889s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.475671768vw, 52.8257337375vh);
animation-duration:.0885845263s;
animation-delay: -.3263154797s;
}
bokeh:nth-child() {
background-color: #efd22;
transform: translate(.559290293vw, 91.8668029819vh);
animation-duration:.6404932212s;
animation-delay: -.9311549742s;
}
bokeh:nth-child() {
background-color: #fce1;
transform: translate(.7654664572vw, 23.0565546063vh);
animation-duration:.4373894218s;
animation-delay: -.7747104339s;
}
@keyframes explosion {% {
opacity:;
}% {
opacity:;
}% {
transform: translate(vw, 100vh);
}
}
.cake {
position: relative;
top:px;
margin: auto;
width:px;
height:px;
background: #ffdff;
border-radius:%;
transform: translateZ(px);
box-shadow:px 4px 0px #f4f9fd, 0px 8px 0px #dba9ff, 0px 12px 0px #fec3b3, 0px 16px 0px #f7f6fb, 0px 20px 0px #f7f6fb, 0px 24px 0px #f7f6fb, 0px 28px 0px #f7f6fb, 0px 32px 0px #fea0bb, 0px 36px 0px #fea0bb, 0px 40px 0px #9cef9d, 0px 44px 0px #9cef9d, 0px 48px 0px #f7f6fb, 0px 52px 0px #f7f6fb, 0px 56px 0px #f7f6fb, 0px 60px 0px #f7f6fb, 0px 64px 0px #f7f6fb, 0px 68px 0px #dfa5fc, 0px 72px 0px #dfa5fc, 0px 76px 0px #fafffe, 0px 80px 0px #fafffe;
}
.plate {
position: absolute;
height:px;
width:px;
bottom: -px;
left:%;
top:px;
margin-left: -px;
border-radius:%;
background: radial-gradient(ellipse closest-side at center, #c7fe 0%, #04d7f2 71%, #02ffd0 100%);
box-shadow:px 3px 0px #00e2e1, 0px 6px 0px #00d3fb;
transform: translateZ(px);
}
.candle {
position: relative;
height:px;
width:px;
top:px;
margin: auto;
background: linear-gradient(deg, #b7f4a7 0%, white 100%);
border-radius:px;
transform: translateZ(px);
}
#flame {
position: absolute;
z-index:;
}
.lit {
background: linear-gradient(to bottom, #FFFD9, #FBC36C);
width:px;
height:px;
/* Info on border radius. http://www.css.info/preview/rounded-border/ */
border-top-left-radius:px 35px;
border-top-right-radius:px 35px;
border-bottom-right-radius:px 10px;
border-bottom-left-radius:px 10px;
top: -px;
margin: auto;
/* http://www.css.info/preview/box-shadow/ */
box-shadow: 0 17px 7px rgba(251, 246, 190, 0.71);
transform-origin: bottom;
animation: flickers ease-in-out alternate infinite;
}
@keyframes flicker {% {
transform: skewX(deg);
box-shadow: 0 17px 10px rgba(251, 246, 190, 0.71);
}% {
transform: skewX(-deg);
box-shadow: 0 17px 5px rgba(251, 246, 190, 0.71);
}% {
transform: skewX(deg);
box-shadow: 0 17px 7px rgba(251, 246, 190, 0.71);
}% {
transform: skewX(-deg);
box-shadow: 0 17px 5px rgba(251, 246, 190, 0.71);
}% {
transform: skewX(deg);
box-shadow: 0 17px 10px rgba(251, 246, 190, 0.71);
}
}
.pyro > .before, .pyro > .after {
position: fixed;
width:px;
height:px;
border-radius:%;
box-shadow: 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation:s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation:s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation:s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation:s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation:s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
-moz-animation-delay:.25s, 1.25s, 1.25s;
-webkit-animation-delay:.25s, 1.25s, 1.25s;
-o-animation-delay:.25s, 1.25s, 1.25s;
-ms-animation-delay:.25s, 1.25s, 1.25s;
animation-delay:.25s, 1.25s, 1.25s;
-moz-animation-duration:.25s, 1.25s, 6.25s;
-webkit-animation-duration:.25s, 1.25s, 6.25s;
-o-animation-duration:.25s, 1.25s, 6.25s;
-ms-animation-duration:.25s, 1.25s, 6.25s;
animation-duration:.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
to {
box-shadow: -px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
}
}
@-moz-keyframes bang {
to {
box-shadow: -px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
}
}
@-o-keyframes bang {
to {
box-shadow: -px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
}
}
@-ms-keyframes bang {
to {
box-shadow: -px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
}
}
@keyframes bang {
to {
box-shadow: -px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
}
}
@-webkit-keyframes gravity {
to {
transform: translateY(px);
-moz-transform: translateY(px);
-webkit-transform: translateY(px);
-o-transform: translateY(px);
-ms-transform: translateY(px);
opacity:;
}
}
@-moz-keyframes gravity {
to {
transform: translateY(px);
-moz-transform: translateY(px);
-webkit-transform: translateY(px);
-o-transform: translateY(px);
-ms-transform: translateY(px);
opacity:;
}
}
@-o-keyframes gravity {
to {
transform: translateY(px);
-moz-transform: translateY(px);
-webkit-transform: translateY(px);
-o-transform: translateY(px);
-ms-transform: translateY(px);
opacity:;
}
}
@-ms-keyframes gravity {
to {
transform: translateY(px);
-moz-transform: translateY(px);
-webkit-transform: translateY(px);
-o-transform: translateY(px);
-ms-transform: translateY(px);
opacity:;
}
}
@keyframes gravity {
to {
transform: translateY(px);
-moz-transform: translateY(px);
-webkit-transform: translateY(px);
-o-transform: translateY(px);
-ms-transform: translateY(px);
opacity:;
}
}
@-webkit-keyframes position {%, 19.9% {
margin-top:%;
margin-left:%;
}%, 39.9% {
margin-top:%;
margin-left:%;
}%, 59.9% {
margin-top:%;
margin-left:%;
}%, 79.9% {
margin-top:%;
margin-left:%;
}%, 99.9% {
margin-top:%;
margin-left:%;
}
}
@-moz-keyframes position {%, 19.9% {
margin-top:%;
margin-left:%;
}%, 39.9% {
margin-top:%;
margin-left:%;
}%, 59.9% {
margin-top:%;
margin-left:%;
}%, 79.9% {
margin-top:%;
margin-left:%;
}%, 99.9% {
margin-top:%;
margin-left:%;
}
}
@-o-keyframes position {%, 19.9% {
margin-top:%;
margin-left:%;
}%, 39.9% {
margin-top:%;
margin-left:%;
}%, 59.9% {
margin-top:%;
margin-left:%;
}%, 79.9% {
margin-top:%;
margin-left:%;
}%, 99.9% {
margin-top:%;
margin-left:%;
}
}
@-ms-keyframes position {%, 19.9% {
margin-top:%;
margin-left:%;
}%, 39.9% {
margin-top:%;
margin-left:%;
}%, 59.9% {
margin-top:%;
margin-left:%;
}%, 79.9% {
margin-top:%;
margin-left:%;
}%, 99.9% {
margin-top:%;
margin-left:%;
}
}
@keyframes position {%, 19.9% {
margin-top:%;
margin-left:%;
}%, 39.9% {
margin-top:%;
margin-left:%;
}%, 59.9% {
margin-top:%;
margin-left:%;
}%, 79.9% {
margin-top:%;
margin-left:%;
}%, 99.9% {
margin-top:%;
margin-left:%;
}
}
}
</style>
</head>
<body>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<div class="mobile">最大化查看</div>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h>Feliz Cumpleaños Pratik!</h1>
<h>Happy Birthday Bro!</h2>
<span>🎉</span>
<div class="candle">
<div id="flame" class="lit"></div>
</div>
<div class="cake"></div>
<div class="plate"></div>
</body>
</html>