HTML生日蛋糕
目录
写在前面
完整代码
代码分析
系列文章
写在最后
写在前面
HTML实现的生日蛋糕来喽，小编亲测，发给好友可以直接打开哦。在代码的第183行可以写下对朋友的祝福，快拿去送给你的好朋友吧！
完整代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<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; }
boche { 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); }
boche:nth-child(1) { background-color: #2bd8ff; transform: translate(70.7404476506vw, 39.2982912115vh); animation-duration: 2.451477853s; animation-delay: -3.9090695973s; }
boche:nth-child(2) { background-color: #feff28; transform: translate(21.390916309vw, 83.9320950239vh); animation-duration: 2.6082661613s; animation-delay: -2.4177632704s; }
boche:nth-child(3) { background-color: #feff28; transform: translate(99.4707896083vw, 50.8779038063vh); animation-duration: 2.3934609219s; animation-delay: -4.9374235187s; }
boche:nth-child(4) { background-color: #ef8d22; transform: translate(88.0762428158vw, 60.8758646268vh); animation-duration: 4.3745762554s; animation-delay: -4.2335574629s; }
boche:nth-child(5) { background-color: #feff28; transform: translate(87.209776097vw, 87.4722435411vh); animation-duration: 2.6247180243s; animation-delay: -0.3571633852s; }
boche:nth-child(6) { background-color: #feff28; transform: translate(67.5348277973vw, 93.8934516001vh); animation-duration: 3.0630744908s; animation-delay: -4.4890304964s; }
boche:nth-child(7) { background-color: #feff28; transform: translate(51.2278043561vw, 39.0030857051vh); animation-duration: 3.1065374294s; animation-delay: -4.5619134997s; }
boche:nth-child(8) { background-color: #fc85e1; transform: translate(63.2547804674vw, 88.7449965817vh); animation-duration: 2.8384921355s; animation-delay: -0.0965491775s; }
boche:nth-child(9) { background-color: #fc85e1; transform: translate(1.7747115187vw, 78.6520215079vh); animation-duration: 4.3100039072s; animation-delay: -0.553894004s; }
boche:nth-child(10) { background-color: #ef8d22; transform: translate(61.1915375825vw, 46.9592056036vh); animation-duration: 2.6244512022s; animation-delay: -4.5897035553s; }
boche:nth-child(11) { background-color: #ef8d22; transform: translate(4.3118502657vw, 31.3689335931vh); animation-duration: 2.9020870937s; animation-delay: -0.0475365525s; }
boche:nth-child(12) { background-color: #fc85e1; transform: translate(11.7124176675vw, 39.3853134156vh); animation-duration: 2.7165067308s; animation-delay: -0.3402677425s; }
boche:nth-child(13) { background-color: #fc85e1; transform: translate(94.2835231134vw, 15.247368654vh); animation-duration: 3.1761028617s; animation-delay: -4.3999397039s; }
boche:nth-child(14) { background-color: #ef8d22; transform: translate(22.7721270307vw, 68.9730094645vh); animation-duration: 3.6217481701s; animation-delay: -4.3121585024s; }
boche:nth-child(15) { background-color: #2bd8ff; transform: translate(82.1182207545vw, 11.2392421851vh); animation-duration: 3.4960993434s; animation-delay: -3.7739573258s; }
boche:nth-child(16) { background-color: #2bd8ff; transform: translate(19.7968006723vw, 77.2717558727vh); animation-duration: 3.1354637591s; animation-delay: -2.8370634184s; }
boche:nth-child(17) { background-color: #feff28; transform: translate(84.4109063964vw, 23.5168492096vh); animation-duration: 4.3723964886s; animation-delay: -1.7390935649s; }
boche:nth-child(18) { background-color: #fc85e1; transform: translate(72.7671083205vw, 62.5592027903vh); animation-duration: 4.4313534479s; animation-delay: -3.0082038529s; }
boche:nth-child(19) { background-color: #2bd8ff; transform: translate(79.3141365436vw, 1.3143345978vh); animation-duration: 2.392781523s; animation-delay: -0.261672225s; }
boche:nth-child(20) { background-color: #ef8d22; transform: translate(29.2041570725vw, 86.8219678576vh); animation-duration: 3.7180833613s; animation-delay: -1.7317238209s; }
boche:nth-child(21) { background-color: #2bd8ff; transform: translate(72.3682688076vw, 29.3261143931vh); animation-duration: 3.5629502006s; animation-delay: -4.5261179684s; }
boche:nth-child(22) { background-color: #2bd8ff; transform: translate(41.7909696011vw, 5.9456249418vh); animation-duration: 2.7586444687s; animation-delay: -1.2172526656s; }
boche:nth-child(23) { background-color: #feff28; transform: translate(76.2571451639vw, 17.195474965vh); animation-duration: 4.4228449437s; animation-delay: -0.4973092974s; }
boche:nth-child(24) { background-color: #2bd8ff; transform: translate(64.8267410528vw, 72.3685961754vh); animation-duration: 4.0308729373s; animation-delay: -3.4748753047s; }
boche:nth-child(25) { background-color: #feff28; transform: translate(51.9640189709vw, 48.6043629666vh); animation-duration: 3.1974276784s; animation-delay: -1.6166953152s; }
boche:nth-child(26) { background-color: #ef8d22; transform: translate(41.1498699458vw, 47.5398372353vh); animation-duration: 4.8552340393s; animation-delay: -0.9697552189s; }
boche:nth-child(27) { background-color: #2bd8ff; transform: translate(81.3954514701vw, 46.9511786798vh); animation-duration: 2.767644001s; animation-delay: -2.7950220038s; }
boche:nth-child(28) { background-color: #ef8d22; transform: translate(75.1070545511vw, 54.2036989448vh); animation-duration: 4.7036199387s; animation-delay: -1.0505926433s; }
boche:nth-child(29) { background-color: #fc85e1; transform: translate(25.2485702636vw, 35.8851684261vh); animation-duration: 3.7316305594s; animation-delay: -1.828910888s; }
boche:nth-child(30) { background-color: #2bd8ff; transform: translate(33.607420868vw, 8.2345981698vh); animation-duration: 2.7029717368s; animation-delay: -2.5500282063s; }
boche:nth-child(31) { background-color: #fc85e1; transform: translate(4.5567738711vw, 26.915212362vh); animation-duration: 3.4355180075s; animation-delay: -0.5790819766s; }
boche:nth-child(32) { background-color: #feff28; transform: translate(25.9501588313vw, 20.9473646869vh); animation-duration: 4.3830077577s; animation-delay: -4.6564701835s; }
boche:nth-child(33) { background-color: #feff28; transform: translate(90.303759829vw, 29.6733774558vh); animation-duration: 2.6689654722s; animation-delay: -0.9045308203s; }
boche:nth-child(34) { background-color: #2bd8ff; transform: translate(89.2836951603vw, 26.5025411567vh); animation-duration: 2.6426834256s; animation-delay: -4.8319924428s; }
boche:nth-child(35) { background-color: #ef8d22; transform: translate(49.6593402454vw, 41.2989731288vh); animation-duration: 2.53627768s; animation-delay: -1.6992049899s; }
boche:nth-child(36) { background-color: #ef8d22; transform: translate(55.3578105489vw, 75.1503457961vh); animation-duration: 2.9803742064s; animation-delay: -3.860230436s; }
boche:nth-child(37) { background-color: #feff28; transform: translate(84.2137545181vw, 99.6489820089vh); animation-duration: 2.8525129053s; animation-delay: -1.909336042s; }
boche:nth-child(38) { background-color: #feff28; transform: translate(58.4226829219vw, 6.6082231423vh); animation-duration: 4.1724251653s; animation-delay: -2.5373921442s; }
boche:nth-child(39) { background-color: #2bd8ff; transform: translate(4.1325762908vw, 16.5826905712vh); animation-duration: 3.3196820224s; animation-delay: -0.1998524335s; }
boche:nth-child(40) { background-color: #ef8d22; transform: translate(38.1082612566vw, 99.6828149038vh); animation-duration: 2.4716860672s; animation-delay: -3.804687821s; }
boche:nth-child(41) { background-color: #ef8d22; transform: translate(80.1246196199vw, 23.2154454066vh); animation-duration: 3.9966714491s; animation-delay: -3.2041854036s; }
boche:nth-child(42) { background-color: #2bd8ff; transform: translate(12.4867607956vw, 81.990153671vh); animation-duration: 4.3771268993s; animation-delay: -2.9204017862s; }
boche:nth-child(43) { background-color: #feff28; transform: translate(88.4304689846vw, 21.1509289349vh); animation-duration: 2.4345176476s; animation-delay: -1.7879472609s; }
boche:nth-child(44) { background-color: #fc85e1; transform: translate(69.7647889352vw, 45.9607535566vh); animation-duration: 4.3935398987s; animation-delay: -3.4611102331s; }
boche:nth-child(45) { background-color: #ef8d22; transform: translate(61.1024281766vw, 8.6360893002vh); animation-duration: 3.7418427756s; animation-delay: -0.8676250685s; }
boche:nth-child(46) { background-color: #2bd8ff; transform: translate(3.2214371062vw, 25.2935105902vh); animation-duration: 3.074683766s; animation-delay: -0.4965853318s; }
boche:nth-child(47) { background-color: #feff28; transform: translate(74.1716691607vw, 3.1894365936vh); animation-duration: 4.4907628187s; animation-delay: -2.968930085s; }
boche:nth-child(48) { background-color: #fc85e1; transform: translate(71.7485884871vw, 81.5140808668vh); animation-duration: 4.6478212704s; animation-delay: -2.4913789916s; }
boche:nth-child(49) { background-color: #ef8d22; transform: translate(68.5706834892vw, 26.9999891094vh); animation-duration: 4.4816990552s; animation-delay: -4.3381289066s; }
boche:nth-child(50) { background-color: #ef8d22; transform: translate(41.4062073866vw, 53.7404657598vh); animation-duration: 3.4662897168s; animation-delay: -3.0623966223s; }
boche:nth-child(51) { background-color: #ef8d22; transform: translate(87.7275522899vw, 57.8586420239vh); animation-duration: 4.5492821401s; animation-delay: -3.9375445372s; }
boche:nth-child(52) { background-color: #fc85e1; transform: translate(98.2142162683vw, 57.3579443658vh); animation-duration: 2.8023852526s; animation-delay: -2.8018360542s; }
boche:nth-child(53) { background-color: #ef8d22; transform: translate(58.9158153095vw, 2.5851120782vh); animation-duration: 4.8828427898s; animation-delay: -4.0170178676s; }
boche:nth-child(54) { background-color: #feff28; transform: translate(21.8232629797vw, 30.541333487vh); animation-duration: 4.1215064165s; animation-delay: -1.7175877986s; }
boche:nth-child(55) { background-color: #fc85e1; transform: translate(13.5806715283vw, 97.9236982484vh); animation-duration: 3.5107176799s; animation-delay: -2.201395581s; }
boche:nth-child(56) { background-color: #feff28; transform: translate(14.4730253941vw, 70.3026987242vh); animation-duration: 2.8655370997s; animation-delay: -4.5406682184s; }
boche:nth-child(57) { background-color: #feff28; transform: translate(8.9309655313vw, 17.5932162599vh); animation-duration: 3.8738411593s; animation-delay: -0.7726217596s; }
boche:nth-child(58) { background-color: #fc85e1; transform: translate(37.5050301898vw, 74.5977925362vh); animation-duration: 2.8543587537s; animation-delay: -0.6382727009s; }
boche:nth-child(59) { background-color: #fc85e1; transform: translate(44.1369706808vw, 19.0224357251vh); animation-duration: 3.4677241213s; animation-delay: -0.3790625881s; }
boche:nth-child(60) { background-color: #ef8d22; transform: translate(89.9172143086vw, 60.5896372203vh); animation-duration: 2.2591286422s; animation-delay: -3.3436293949s; }
boche:nth-child(61) { background-color: #2bd8ff; transform: translate(86.129997629vw, 57.7175593668vh); animation-duration: 3.3394070906s; animation-delay: -1.2058207724s; }
boche:nth-child(62) { background-color: #ef8d22; transform: translate(62.6094040216vw, 64.6028247058vh); animation-duration: 2.7708027023s; animation-delay: -1.3248560361s; }
boche:nth-child(63) { background-color: #fc85e1; transform: translate(1.4935870167vw, 49.1580693638vh); animation-duration: 4.0753471222s; animation-delay: -1.1042384607s; }
boche:nth-child(64) { background-color: #ef8d22; transform: translate(49.4229799547vw, 14.4558125829vh); animation-duration: 4.6042743538s; animation-delay: -1.5068368619s; }
boche:nth-child(65) { background-color: #2bd8ff; transform: translate(24.1752717226vw, 44.959300202vh); animation-duration: 2.7140677085s; animation-delay: -4.1288509334s; }
boche:nth-child(66) { background-color: #2bd8ff; transform: translate(47.8734263303vw, 94.391925096vh); animation-duration: 4.5332114735s; animation-delay: -2.9163200431s; }
boche:nth-child(67) { background-color: #ef8d22; transform: translate(78.8655189976vw, 86.980092905vh); animation-duration: 2.3004360444s; animation-delay: -2.2638107753s; }
boche:nth-child(68) { background-color: #feff28; transform: translate(9.900688433vw, 44.1486399622vh); animation-duration: 4.5713456324s; animation-delay: -1.6496695177s; }
boche:nth-child(69) { background-color: #fc85e1; transform: translate(69.5673498579vw, 22.4102469728vh); animation-duration: 4.5195536497s; animation-delay: -2.4477867877s; }
boche:nth-child(70) { background-color: #fc85e1; transform: translate(11.1928628475vw, 56.5732657592vh); animation-duration: 4.2452477565s; animation-delay: -4.784497837s; }
boche:nth-child(71) { background-color: #feff28; transform: translate(55.2490898496vw, 28.0060803314vh); animation-duration: 2.4738318304s; animation-delay: -4.2575550351s; }
boche:nth-child(72) { background-color: #ef8d22; transform: translate(47.5206781163vw, 98.1803905721vh); animation-duration: 4.4299041867s; animation-delay: -1.6544913646s; }
boche:nth-child(73) { background-color: #fc85e1; transform: translate(3.3800457033vw, 87.8857972808vh); animation-duration: 2.1543860283s; animation-delay: -1.5361790929s; }
boche:nth-child(74) { background-color: #feff28; transform: translate(50.2022983803vw, 53.6621206454vh); animation-duration: 3.5498075114s; animation-delay: -1.622928478s; }
boche:nth-child(75) { background-color: #2bd8ff; transform: translate(61.4792038272vw, 49.9574099775vh); animation-duration: 4.3023511502s; animation-delay: -2.5662268689s; }
boche:nth-child(76) { background-color: #2bd8ff; transform: translate(96.8566584025vw, 62.4294941633vh); animation-duration: 3.0488542535s; animation-delay: -3.2247802825s; }
boche:nth-child(77) { background-color: #ef8d22; transform: translate(39.2082016768vw, 31.510327441vh); animation-duration: 3.3263311044s; animation-delay: -4.8680742107s; }
boche:nth-child(78) { background-color: #ef8d22; transform: translate(96.5195887397vw, 10.3731475626vh); animation-duration: 4.2409467825s; animation-delay: -0.7158376764s; }
boche:nth-child(79) { background-color: #fc85e1; transform: translate(60.3099737688vw, 98.3753373411vh); animation-duration: 2.5537973442s; animation-delay: -0.63998392s; }
boche:nth-child(80) { background-color: #ef8d22; transform: translate(11.5967388759vw, 14.9299043275vh); animation-duration: 2.8098590221s; animation-delay: -2.4370859968s; }
boche:nth-child(81) { background-color: #ef8d22; transform: translate(74.1223777298vw, 70.1971631522vh); animation-duration: 4.2838589963s; animation-delay: -3.7401444523s; }
boche:nth-child(82) { background-color: #feff28; transform: translate(84.1015262739vw, 81.3441360981vh); animation-duration: 3.2939592107s; animation-delay: -1.9150983315s; }
boche:nth-child(83) { background-color: #fc85e1; transform: translate(0.7106752653vw, 36.7850329091vh); animation-duration: 4.8849572533s; animation-delay: -1.6034485131s; }
boche:nth-child(84) { background-color: #ef8d22; transform: translate(87.8717119902vw, 89.8137587323vh); animation-duration: 4.4917909367s; animation-delay: -0.6839290268s; }
boche:nth-child(85) { background-color: #fc85e1; transform: translate(57.2928640388vw, 75.8426881671vh); animation-duration: 3.1987712966s; animation-delay: -0.7031902792s; }
boche:nth-child(86) { background-color: #fc85e1; transform: translate(95.0682843643vw, 18.2581374607vh); animation-duration: 2.8925956423s; animation-delay: -1.0572694348s; }
boche:nth-child(87) { background-color: #fc85e1; transform: translate(59.0707981851vw, 48.7661464606vh); animation-duration: 2.6026617399s; animation-delay: -4.8628976688s; }
boche:nth-child(88) { background-color: #fc85e1; transform: translate(41.8052009135vw, 3.1629584265vh); animation-duration: 3.9945698031s; animation-delay: -3.2234605093s; }
boche:nth-child(89) { background-color: #2bd8ff; transform: translate(47.1542426485vw, 6.2335870209vh); animation-duration: 3.2101759535s; animation-delay: -4.3446493263s; }
boche:nth-child(90) { background-color: #feff28; transform: translate(55.1752701425vw, 47.3028980994vh); animation-duration: 3.7706786674s; animation-delay: -3.1945484167s; }
boche:nth-child(91) { background-color: #2bd8ff; transform: translate(64.3680183118vw, 70.2328105992vh); animation-duration: 4.9905256372s; animation-delay: -3.3445529913s; }
boche:nth-child(92) { background-color: #fc85e1; transform: translate(57.1140237902vw, 90.0487890223vh); animation-duration: 3.8901112768s; animation-delay: -1.6312829089s; }
boche:nth-child(93) { background-color: #feff28; transform: translate(79.8479180254vw, 50.5459436949vh); animation-duration: 2.0763765466s; animation-delay: -2.2578885579s; }
boche:nth-child(94) { background-color: #feff28; transform: translate(19.6698287233vw, 25.3724994599vh); animation-duration: 2.3036069206s; animation-delay: -4.4809995763s; }
boche:nth-child(95) { background-color: #fc85e1; transform: translate(53.2976851652vw, 47.9411811828vh); animation-duration: 4.0118610481s; animation-delay: -4.5248562455s; }
boche:nth-child(96) { background-color: #feff28; transform: translate(39.9679535656vw, 74.256254716vh); animation-duration: 3.4959949039s; animation-delay: -3.4307375377s; }
boche:nth-child(97) { background-color: #feff28; transform: translate(22.0090368657vw, 87.5674469503vh); animation-duration: 2.1309873931s; animation-delay: -2.9910336889s; }
boche:nth-child(98) { background-color: #ef8d22; transform: translate(19.475671768vw, 52.8257337375vh); animation-duration: 2.0885845263s; animation-delay: -3.3263154797s; }
boche:nth-child(99) { background-color: #ef8d22; transform: translate(64.559290293vw, 91.8668029819vh); animation-duration: 4.6404932212s; animation-delay: -4.9311549742s; }
boche:nth-child(100) { background-color: #fc85e1; transform: translate(23.7654664572vw, 23.0565546063vh); animation-duration: 2.4373894218s; animation-delay: -3.7747104339s; }
@keyframes explosion { 0% { opacity: 0; } 70% { opacity: 1; } 100% { transform: translate(50vw, 100vh); } } .cake { position: relative; top: 250px; margin: auto; width: 200px; height: 60px; background: #f9fdff; border-radius: 100%; transform: translateZ(100px); box-shadow: 0px 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: 90px; width: 300px; bottom: -95px; left: 50%; top: 380px; margin-left: -150px; border-radius: 100%; background: radial-gradient(ellipse closest-side at center, #08c7fe 0%, #04d7f2 71%, #02ffd0 100%); box-shadow: 0px 3px 0px #00e2e1, 0px 6px 0px #00d3fb; transform: translateZ(80px); }
.candle { position: relative; height: 50px; width: 12px; top: 280px; margin: auto; background: linear-gradient(0deg, #b7f4a7 0%, white 100%); border-radius: 4px; transform: translateZ(120px); }
#flame { position: absolute; z-index: 10; }
.lit { background: linear-gradient(to bottom, #FFF6D9, #FBC36C); width: 15px; height: 35px; /* Info on border radius. http://www.css3.info/preview/rounded-border/ */ border-top-left-radius: 10px 35px; border-top-right-radius: 10px 35px; border-bottom-right-radius: 10px 10px; border-bottom-left-radius: 10px 10px; top: -34px; margin: auto; /* http://www.css3.info/preview/box-shadow/ */ box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71); transform-origin: bottom; animation: flicker 1s ease-in-out alternate infinite; }
@keyframes flicker { 0% { transform: skewX(5deg); box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71); } 25% { transform: skewX(-5deg); box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71); } 50% { transform: skewX(10deg); box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71); } 75% { transform: skewX(-10deg); box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71); } 100% { transform: skewX(5deg); box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71); } }
.pyro > .before, .pyro > .after { position: fixed; width: 5px; height: 5px; border-radius: 50%; box-shadow: 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, 0 0 #fff; -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }
.pyro > .after { -moz-animation-delay: 1.25s, 1.25s, 1.25s; -webkit-animation-delay: 1.25s, 1.25s, 1.25s; -o-animation-delay: 1.25s, 1.25s, 1.25s; -ms-animation-delay: 1.25s, 1.25s, 1.25s; animation-delay: 1.25s, 1.25s, 1.25s; -moz-animation-duration: 1.25s, 1.25s, 6.25s; -webkit-animation-duration: 1.25s, 1.25s, 6.25s; -o-animation-duration: 1.25s, 1.25s, 6.25s; -ms-animation-duration: 1.25s, 1.25s, 6.25s; animation-duration: 1.25s, 1.25s, 6.25s; }
@-webkit-keyframes bang { to { box-shadow: -110px -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: -110px -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: -110px -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: -110px -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: -110px -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}}}
</style>
</head>
<body>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<boche></boche>
<div class="mobile">最大化查看</div>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h2>Happy Birthday!<br/></h2>
<h1><br/>Feliz Cumpleaños Pratik!</h1>
<span></span>
<div class="candle">
<div id="flame" class="lit"></div>
</div>
<div class="cake"></div>
<div class="plate"></div>
</body>
</html>代码分析
此 HTML 和 CSS 代码创建了一个带有庆祝动画效果的生日主题网页。此页面的主要元素包括渐变背景、3D 效果的生日蛋糕、动画烟花和闪烁的蜡烛火焰，下面让我们分解一下代码的关键组件。
1. HTML 结构
HTML 结构很简单，定义了蛋糕和装饰品等基本元素。元素被赋予类，然后在 CSS 中设置样式。
2. CSS 样式
CSS 负责视觉美感和动画。它使用高级 CSS 功能，如渐变、动画关键帧和 3D 效果变换。
-
字体和基本样式：代码为页面导入 Google 字体（“Concert One”和“Pacifico”）。移动样式适用于大文本，对于屏幕小于 670px 的设备，某些元素会使用媒体查询进行隐藏。
-
背景和文本样式：
body具有从紫色过渡到蓝色的线性渐变背景。h1、h2和span元素的样式显示带有渐变填充的文本，这些文本与背景融合在一起，从而创建了视觉上吸引人的标题。 -
散景动画（烟花效果）：
-
bokeh类定义随机放置在屏幕上的小圆圈。每个bokeh元素都有不同的动画延迟和持续时间，使它们在不同的时间出现。 -
@keyframes explosive规则通过逐渐增加这些散景元素的不透明度，然后将它们平移到屏幕上，模拟烟花，从而为这些散景元素制作动画。 -
蛋糕和盘子：
-
.cake类使用box-shadow创建 3D 外观的蛋糕，为各层添加深度和不同颜色。蛋糕位于中心，呈圆形。 -
.plate类使用radial-gradient创建蛋糕下方盘子的外观，使其看起来像场景中真实的一部分。 -
蜡烛和火焰：
-
.candle类使用线性渐变样式，使其看起来呈圆柱形。它位于蛋糕顶部。 -
#flame和.lit类使用渐变和圆角创建火焰形状。火焰具有使用@keyframes flicker动画实现的闪烁效果。动画略微倾斜火焰并改变box-shadow，给人一种真实火焰闪烁的错觉。 -
烟花粒子（烟火效果）：
-
.pyro类使用box-shadow创建一组小点，以产生烟花效果。这些点使用控制其爆炸（“bang”）、重力和定位的关键帧进行动画处理，使其类似于烟花表演。
3. 响应式设计
代码包括媒体查询，可根据屏幕大小调整某些元素的可见性和样式。这使得页面在移动设备和桌面设备上都具有响应性和视觉吸引力。
4. 动画
使用 @keyframes 是动态效果的核心：
-
爆炸：控制散景元素的运动和可见性。
-
闪烁：为蜡烛火焰提供微妙的闪烁，增强真实感。
-
爆炸：使用向外爆裂的多个彩色点模拟烟花爆炸。
5. 渐变和阴影
使用渐变作为背景、文本和其他元素可以为设计增添深度和节日气氛。阴影被广泛用于营造层次感和 3D 效果，尤其是在蛋糕上。
此代码创建了视觉丰富且具有交互性的生日庆祝体验。它有效地结合了 CSS 动画、渐变和阴影，以制作出动态且吸引人的场景。使用媒体查询可确保设计具有响应性，可适应不同的屏幕尺寸，同时保持其美感。
系列文章
| 序号 | 目录 |
| 1 | HTML满屏跳动的爱心（可写字） |
| 2 | HTML五彩缤纷的爱心 |
| 3 | HTML满屏漂浮爱心 |
| 4 | HTML情人节快乐 |
| 5 | HTML蓝色爱心射线 |
| 6 | HTML跳动的爱心（简易版） |
| 7 | HTML粒子爱心 |
| 8 | HTML蓝色动态爱心 |
| 9 | HTML跳动的爱心（双心版） |
| 10 | HTML橙色动态粒子爱心 |
| 11 | HTML旋转爱心 |
| 12 | HTML爱情树 |
| 13 | HTML3D相册 |
| 14 | HTML旋转相册 |
| 15 | HTML基础烟花秀 |
| 16 | HTML炫酷烟花秀 |
| 17 | HTML粉色烟花秀 |
| 18 | HTML新春烟花 |
| 19 | HTML龙年大吉 |
| 20 | HTML圣诞树 |
| 21 | HTML大雪纷飞 |
| 22 | HTML想见你 |
| 23 | HTML元素周期表 |
| 24 | HTML飞舞的花瓣 |
| 25 | HTML星空特效 |
| 26 | HTML黑客帝国字母雨 |
| 27 | HTML哆啦A梦 |
| 28 | HTML流星雨 |
| 29 | HTML沙漏爱心 |
| 30 | HTML爱心字母雨 |
| 31 | HTML爱心流星雨 |
| 32 | HTML生日蛋糕 |
写在最后
我是一只有趣的兔子，感谢你的喜欢！
相关文章：
HTML生日蛋糕
目录 写在前面 完整代码 代码分析 系列文章 写在最后 写在前面 HTML实现的生日蛋糕来喽，小编亲测，发给好友可以直接打开哦。在代码的第183行可以写下对朋友的祝福，快拿去送给你的好朋友吧！ 完整代码 <!DOCTYPE html>…...
【软件逆向】第27课，软件逆向安全工程师之（二）寄存器寻址，每天5分钟学习逆向吧！
寄存器寻址是汇编语言中的一种寻址方式，在这种方式中，操作数位于CPU的寄存器中。寄存器是CPU内部的高速存储位置，用于快速访问数据。以下是关于寄存器寻址的详细信息： 寄存器寻址的特点： 操作数在寄存器中࿱…...
前缀和 — 利用前缀信息解决子数组问题
【前缀和的核心思想是预先处理数组来快速计算任意子数组的和，基本上用于数组和序列问题。】 前缀和算法具体步骤 构造前缀和数组： 给定一个数组nums，其前缀和数组prex定义为prex[i]表示为数组nums从起始位置到第i个位置的元素累加和。构建前…...
2024年最新版Ajax+Axios 学习【包含原理、Promise、报文、接口等...】
基础知识 AJAX概念 AJAX概念：是浏览器与服务器进行数据通信的技术。 认识URL 定义：统一资源定位符，简称网址，用于访问网络上的资源。 组成： http协议：超文本传输协议，规定浏览器和服务器之…...
【Qt线程】—— Qt线程详解
目录 （一）多线程的概述 （二）Qt线程的使用条件 （三）创建线程的方法 3.1 继承QTread，重写run()函数 3.1.1 为什么要重写 3.2 继承QObject 3.3 核心API介绍 3.4 关闭线程的使用方法 &…...
Golang | Leetcode Golang题解之第391题完美矩形
题目： 题解： func isRectangleCover(rectangles [][]int) bool {type point struct{ x, y int }area, minX, minY, maxX, maxY : 0, rectangles[0][0], rectangles[0][1], rectangles[0][2], rectangles[0][3]cnt : map[point]int{}for _, rect : range…...
〖open-mmlab: MMDetection〗解析文件：mmdet/models/detectors/two_stage.py
目录 MMDetection中的两阶段检测器：深入解析two_stage.py源码两阶段检测器概述two_stage.py的关键组件类定义和初始化构造函数Neck头配置RPN头配置RoI头配置_load_from_state_dict方法概述参数解释代码解析 特征提取方法签名文档字符串（Docstring&#x…...
【最新华为OD机试E卷-支持在线评测】机器人活动区域(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)
🍭 大家好这里是春秋招笔试突围 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-E/D卷的三语言AC题解 💻 ACM金牌🏅️团队| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，…...
C语言：刷题日志(1)
一.阶乘计算升级版 本题要求实现一个打印非负整数阶乘的函数。 其中n是用户传入的参数，其值不超过1000。如果n是非负整数，则该函数必须在一行中打印出n!的值，否则打印“Invalid input”。 首先，知道阶乘是所有小于及等于该数的…...
导入失败，Windows OpenSSl 1.1.1 下载)
ios私钥证书(p12)导入失败，Windows OpenSSl 1.1.1 下载
ios私钥证书(p12)导入失败 如果你用的OpenSSL版本是v3那么恭喜你V3必然报这个错，解决办法将OpenSSL 3降低成 v1。 Windows OpenSSl 1.1.1 下载 阿里云网盘下载地址：OpenSSL V1...
嵌入式面试经典30问：二
1. 嵌入式系统中，如何选择合适的微控制器或微处理器？ 在嵌入式系统中选择合适的微控制器（MCU）或微处理器（MPU）时，需要考虑多个因素以确保所选组件能够满足项目的具体需求。以下是一些关键步骤和…...
目标检测-YOLOv1
YOLOv1介绍 YOLOv1（You Only Look Once version 1）是一种用于目标检测的深度学习算法，由Joseph Redmon等人于2016年提出。它基于单个卷积神经网络，将目标检测任务转化为一个回归问题，通过在图像上划分网格并预测每个网…...
python基础语法八-异常
书接上回： python基础语法一-基本数据类型 python基础语法二-多维数据类型 python基础语法三-类 python基础语法四-数据可视化 python基础语法五-函数 python基础语法六-正则匹配 python基础语法七-openpyxl操作excel 1. 异常简介 (1)异常：遇到…...
【堆的应用--C语言版】
前面一节我们都已将堆的结构（顺序存储）已经实现，对树的相关概念以及知识做了一定的了解。其中我们在实现删除操作和插入操作的时候，我们还同时实现了建大堆（小堆）的向上（下）调整算法…...
【微信小程序】搭建项目步骤 + 引入Tdesign UI
目录 创建1个空文件夹，选择下图基础模板 开启/支持sass 创建公共style文件并引入 引入Tdesign UI: 1. 初始化： 2. 安装后，开发工具进行构建： 3. 修改 app.json 4. 使用 5. 自定义主题色 创建1个空文件夹，选择下…...
android系统源码12 修改默认桌面壁纸--SRO方式
1、aosp12修改默认桌面壁纸 代码路径 ：frameworks\base\core\res\res\drawable-nodpi 替换成自己的图片即可，不过需要覆盖所有目录下的图片。 由于是静态修改，则需要make一下，重新编译。 2、方法二Overlay方式 由于上述方法有…...
Echarts可视化
echarts是一个基于javascripts的开源可视化图表库 画图步骤： 1.引入echarts.js文件 <script src" https://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js"></script> 也可将文件下载到本地通过src引入。 2. 准备一个呈现图表的…...
验证linux gpu是否可用
通过torch验证 import torchprint(torch.__version__) # 查看torch当前版本号 print(torch.version.cuda) # 编译当前版本的torch使用的cuda版本号 print(torch.cuda.is_available()) # 查看当前cuda是否可用于当前版本的Torch，如果输出True，则表示可…...
JavaScript( 简介)
目录 含义 实例 js代码位置 1 外部引入js文件 2 在 HTML 中，JavaScript 代码必须位于 标签之间。 小结 含义 js是一门脚本语言，能够改变HTML内容 实例 getElementById() 是多个 JavaScript HTML 方法之一。 本例使用该方法来“查找” id"d…...
Linux中的编译器gcc/g++
目录 一、gcc与g的区别 1.gcc编译器使用 2.g编译器使用 二、gcc/g编译器编译源文件过程 1.预处理 2.编译 3.汇编 4.链接 三、静态库和动态库 1.库中的头文件作用 2.静态库 3.动态库 四、gcc编译器的一些选项命令 一、gcc与g的区别 gcc用于编译C语言代码ÿ…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
测试markdown--肇兴
day1： 1、去程：7:04 --11:32高铁 高铁右转上售票大厅2楼，穿过候车厅下一楼，上大巴车 ￥10/人 **2、到达：**12点多到达寨子，买门票，美团/抖音：￥78人 3、中饭&a…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...
在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤： 第一步： 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为： // 改为 v…...