当前位置：首页 > news >正文

HTML生日蛋糕

news 2025/9/15 22:36:20

写在前面

完整代码

代码分析

系列文章

写在最后

写在前面

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>…...

编程日记 2024/9/8 5:39:50

【软件逆向】第27课，软件逆向安全工程师之（二）寄存器寻址，每天5分钟学习逆向吧！

寄存器寻址是汇编语言中的一种寻址方式，在这种方式中，操作数位于CPU的寄存器中。寄存器是CPU内部的高速存储位置，用于快速访问数据。以下是关于寄存器寻址的详细信息： 寄存器寻址的特点： 操作数在寄存器中&#xff1…...

编程日记 2024/9/8 5:36:46

前缀和 — 利用前缀信息解决子数组问题

【前缀和的核心思想是预先处理数组来快速计算任意子数组的和，基本上用于数组和序列问题。】前缀和算法具体步骤构造前缀和数组： 给定一个数组nums，其前缀和数组prex定义为prex[i]表示为数组nums从起始位置到第i个位置的元素累加和。构建前…...

编程日记 2024/9/8 5:35:45

2024年最新版Ajax+Axios 学习【包含原理、Promise、报文、接口等...】

基础知识 AJAX概念 AJAX概念：是浏览器与服务器进行数据通信的技术。认识URL 定义：统一资源定位符，简称网址，用于访问网络上的资源。组成： http协议：超文本传输协议，规定浏览器和服务器之…...

编程日记 2024/9/8 5:34:43

【Qt线程】—— Qt线程详解

目录 （一）多线程的概述 （二）Qt线程的使用条件 （三）创建线程的方法 3.1 继承QTread，重写run()函数 3.1.1 为什么要重写 3.2 继承QObject 3.3 核心API介绍 3.4 关闭线程的使用方法 &…...

编程日记 2024/9/8 5:33:42

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…...

编程日记 2024/9/8 5:31:40

〖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…...

编程日记 2024/9/8 5:30:39

【最新华为OD机试E卷-支持在线评测】机器人活动区域(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-E/D卷的三语言AC题解 💻 ACM金牌🏅️团队| 多次AK大厂笔试｜编程一对一辅导 👏 感谢大家的订阅➕ 和喜欢💗 🍿 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，…...

编程日记 2024/9/8 5:29:37

C语言：刷题日志(1)

一.阶乘计算升级版本题要求实现一个打印非负整数阶乘的函数。其中n是用户传入的参数，其值不超过1000。如果n是非负整数，则该函数必须在一行中打印出n!的值，否则打印“Invalid input”。首先，知道阶乘是所有小于及等于该数的…...

编程日记 2024/9/8 5:25:34

ios私钥证书(p12)导入失败，Windows OpenSSl 1.1.1 下载

ios私钥证书(p12)导入失败如果你用的OpenSSL版本是v3那么恭喜你V3必然报这个错，解决办法将OpenSSL 3降低成 v1。 Windows OpenSSl 1.1.1 下载阿里云网盘下载地址：OpenSSL V1...

编程日记 2024/9/8 5:20:29

嵌入式面试经典30问：二

1. 嵌入式系统中，如何选择合适的微控制器或微处理器？ 在嵌入式系统中选择合适的微控制器（MCU）或微处理器（MPU）时，需要考虑多个因素以确保所选组件能够满足项目的具体需求。以下是一些关键步骤和…...

编程日记 2024/9/8 5:19:28

目标检测-YOLOv1

YOLOv1介绍 YOLOv1（You Only Look Once version 1）是一种用于目标检测的深度学习算法，由Joseph Redmon等人于2016年提出。它基于单个卷积神经网络，将目标检测任务转化为一个回归问题，通过在图像上划分网格并预测每个网…...

编程日记 2024/9/8 5:18:27

python基础语法八-异常

书接上回： python基础语法一-基本数据类型 python基础语法二-多维数据类型 python基础语法三-类 python基础语法四-数据可视化 python基础语法五-函数 python基础语法六-正则匹配 python基础语法七-openpyxl操作excel 1. 异常简介 (1)异常：遇到…...

编程日记 2024/9/8 5:16:24

【堆的应用--C语言版】

前面一节我们都已将堆的结构（顺序存储）已经实现，对树的相关概念以及知识做了一定的了解。其中我们在实现删除操作和插入操作的时候，我们还同时实现了建大堆（小堆）的向上（下）调整算法…...

编程日记 2024/9/8 5:15:23

【微信小程序】搭建项目步骤 + 引入Tdesign UI

目录创建1个空文件夹，选择下图基础模板开启/支持sass 创建公共style文件并引入引入Tdesign UI: 1. 初始化： 2. 安装后，开发工具进行构建： 3. 修改 app.json 4. 使用 5. 自定义主题色创建1个空文件夹，选择下…...

编程日记 2024/9/8 5:14:22

android系统源码12 修改默认桌面壁纸--SRO方式

1、aosp12修改默认桌面壁纸代码路径 ：frameworks\base\core\res\res\drawable-nodpi 替换成自己的图片即可，不过需要覆盖所有目录下的图片。由于是静态修改，则需要make一下，重新编译。 2、方法二Overlay方式由于上述方法有…...

编程日记 2024/9/8 5:13:21

Echarts可视化

echarts是一个基于javascripts的开源可视化图表库画图步骤： 1.引入echarts.js文件 <script src" https://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js"></script> 也可将文件下载到本地通过src引入。 2. 准备一个呈现图表的…...

编程日记 2024/9/8 5:12:19

验证linux gpu是否可用

通过torch验证 import torchprint(torch.__version__) # 查看torch当前版本号 print(torch.version.cuda) # 编译当前版本的torch使用的cuda版本号 print(torch.cuda.is_available()) # 查看当前cuda是否可用于当前版本的Torch，如果输出True，则表示可…...

编程日记 2024/9/8 5:11:18

JavaScript( 简介)

目录含义实例 js代码位置 1 外部引入js文件 2 在 HTML 中，JavaScript 代码必须位于标签之间。小结含义 js是一门脚本语言，能够改变HTML内容实例 getElementById() 是多个 JavaScript HTML 方法之一。本例使用该方法来“查找” id"d…...

编程日记 2024/9/8 5:09:15

Linux中的编译器gcc/g++

目录一、gcc与g的区别 1.gcc编译器使用 2.g编译器使用二、gcc/g编译器编译源文件过程 1.预处理 2.编译 3.汇编 4.链接三、静态库和动态库 1.库中的头文件作用 2.静态库 3.动态库四、gcc编译器的一些选项命令一、gcc与g的区别 gcc用于编译C语言代码&#xff…...

编程日记 2024/9/8 5:07:13

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2025/9/15 0:18:50

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/9/12 22:07:34

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/9/14 20:08:44

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/8/26 5:10:22

今日科技热点速览

🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧。 🤖 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/9/13 8:59:33

汇编常见指令

汇编常见指令一、数据传送指令指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/9/14 10:43:41