我就要把你们男朋友卷死
| <!DOCTYPE HEML PUBLIC> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <style> |
| html, body |
| { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| div |
| { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .nav |
| { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 27px; |
| background-color: white; |
| color: black; |
| text-align: center; |
| line-height: 25px; |
| } |
| |
| a |
| { |
| color: black; |
| text-decoration: none; |
| border-bottom: 1px dashed black; |
| } |
| |
| a:hover |
| { |
| border-bottom: 1px solid red; |
| } |
| |
| .previous |
| { |
| float: left; |
| margin-left: 10px; |
| } |
| |
| .next |
| { |
| float: right; |
| margin-right: 10px; |
| } |
| |
| .green |
| { |
| color: green; |
| } |
| |
| .red |
| { |
| color: red; |
| } |
| |
| textarea |
| { |
| width: 100%; |
| height: 100%; |
| border: 0; |
| padding: 0; |
| margin: 0; |
| padding-bottom: 20px; |
| } |
| |
| .block-outer |
| { |
| float: left; |
| width: 22%; |
| height: 100%; |
| padding: 5px; |
| border-left: 1px solid black; |
| margin: 30px 3px 3px 3px; |
| } |
| |
| .block-inner |
| { |
| height: 68%; |
| } |
| |
| .one |
| { |
| border: 0; |
| } |
| </style> |
| </head> |
| <body marginwidth="0" marginheight="0"> |
| <canvas id="c" height="356" width="446"> |
| <script> |
| var collapsed = true; |
| function toggle() |
| { |
| var fs = top.document.getElementsByTagName('frameset')[0]; |
| var f = fs.getElementsByTagName('frame'); |
| if (collapsed) |
| { |
| fs.rows = '250px,*'; |
| fs.noResize = false; |
| f[0].noResize = false; |
| f[1].noResize = false; |
| } |
| |
| else |
| { |
| fs.rows = '30px,*'; |
| fs.noResize = true; |
| f[0].noResize = true; |
| f[1].noResize = true; |
| } |
| collapsed = !collapsed; |
| } |
| </script> |
| |
| <script> |
| var b = document.body; |
| var c = document.getElementsByTagName('canvas')[0]; |
| var a = c.getContext('2d'); |
| document.body.clientWidth; |
| </script> |
| |
| <script> |
| M=Math; |
| Q=M.random;J=[]; |
| U=16; |
| T=M.sin; |
| E=M.sqrt; |
| for(O=k=0;x=z=j=i=k<200;) |
| with(M[k]=k?c.cloneNode(0):c) |
| { |
| width=height=k?32:W=446; |
| with(getContext('2d')) |
| if(k>10|!k) |
| |
| for( |
| font='60px Impact', |
| V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)': |
| V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;) |
| |
| beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1))); |
| |
| else for(; |
| x=T(i), |
| y=Q()*2-1, |
| D=x*x+y*y, |
| B=E(D-x/.9-1.5*y+1), |
| R=67*(B+1)*(L=k/9+.8)>>1, |
| i++<W; |
| ) |
| |
| if(D<1) |
| beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'), |
| moveTo(U+x*8,U+y*8), |
| lineTo(U+x*U,U+y*U), |
| stroke(); |
| |
| for( |
| y=H=k+E(k++)*25, |
| R=Q()*W; |
| P=3,j<H;) |
| J[O++]=[ |
| x+=T(R)*P+Q()*6-3,y+=Q()*U-8, |
| z+=T(R-11)*P+Q()*6-3, |
| j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1] |
| } |
| |
| setInterval(function G(m,l) |
| { |
| A=T(D-11); |
| if(l) |
| |
| return( |
| m[2]-l[2])*A+(l[0]-m[0])*T(D); |
| a.clearRect(0,0,W,W); |
| J.sort(G); |
| |
| for( |
| i=0; |
| L=J[i++]; |
| a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)) |
| { |
| if(i==2e3) |
| a.fillText |
| ('Happy Christmas!',U,345); |
| |
| if(!(i%7)) |
| a.drawImage(M[13], |
| ((157*(i*i)+T(D*5+i*i)*5)%W)>>0, |
| ((113*i+(D*i)/60)%(290+i/99))>>0); |
| } |
| D+=.02 |
| },1) |
| </script> |
| </body> |
| </html> |
| |
| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>圣诞树</title> |
| |
| <style type="text/css"> |
| <!-- |
| @charset "utf-8"; |
| * { |
| box-sizing: border-box; |
| } |
| body { |
| background: #233343; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| perspective: 1200px; |
| transform-style: preserve-3d; |
| } |
| .tree { |
| position: relative; |
| height: 50vmin; |
| width: 25vmin; |
| transform-style: preserve-3d; |
| -webkit-animation: spin 2s infinite linear; |
| animation: spin 2s infinite linear; |
| } |
| .tree__light { |
| transform-style: preserve-3d; |
| position: absolute; |
| height: 1vmin; |
| width: 1vmin; |
| border-radius: 50%; |
| -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both; |
| animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both; |
| left: 50%; |
| transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin)); |
| bottom: calc(var(--y, 0) * 1%); |
| } |
| .tree__star { |
| stroke-width: 5vmin; |
| stroke: #f5e0a3; |
| filter: drop-shadow(0 0 2vmin #fcf1cf); |
| height: 5vmin; |
| width: 5vmin; |
| overflow: visible !important; |
| bottom: 100%; |
| left: 50%; |
| transform: translate(-50%, 0); |
| position: absolute; |
| stroke-dasharray: 1000 1000; |
| fill: none; |
| -webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both; |
| animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both; |
| } |
| @-webkit-keyframes stroke { |
| from { |
| stroke-dashoffset: -1000; |
| } |
| } |
| @keyframes stroke { |
| from { |
| stroke-dashoffset: -1000; |
| } |
| } |
| @-webkit-keyframes spin { |
| to { |
| transform: rotateY(360deg); |
| } |
| } |
| @keyframes spin { |
| to { |
| transform: rotateY(360deg); |
| } |
| } |
| @-webkit-keyframes appear { |
| from { |
| opacity: 0; |
| } |
| } |
| @keyframes appear { |
| from { |
| opacity: 0; |
| } |
| } |
| @-webkit-keyframes flash { |
| 0%, 100% { |
| background: #4f60f6; |
| } |
| 20% { |
| background: #f64f4f; |
| } |
| 40% { |
| background: #4fecf6; |
| } |
| 60% { |
| background: #f6db4f; |
| } |
| 80% { |
| background: #f64fe5; |
| } |
| } |
| @keyframes flash { |
| 0%, 100% { |
| background: #4f60f6; |
| } |
| 20% { |
| background: #f64f4f; |
| } |
| 40% { |
| background: #4fecf6; |
| } |
| 60% { |
| background: #f6db4f; |
| } |
| 80% { |
| background: #f64fe5; |
| } |
| } |
| --> |
| </style> |
| </head> |
| <body> |
| <div class="tree"> |
| <div class="tree__light" style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 6.400434662074517; --delay: -5.729518378221366;"></div> |
| <div class="tree__light" style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 8.289118880758405; --delay: -9.821339538073875;"></div> |
| <div class="tree__light" style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 2.762214438568402; --delay: -9.82553991641267;"></div> |
| <div class="tree__light" style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 5.2169599789222705; --delay: -1.146313414741591;"></div> |
| <div class="tree__light" style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 8.665042244953177; --delay: -2.232614726172797;"></div> |
| <div class="tree__light" style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.1841290939752; --delay: -3.2948672174559213;"></div> |
| <div class="tree__light" style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 0.2386221851841408; --delay: -0.1565400802638761;"></div> |
| <div class="tree__light" style="--appear: 7; --y: 14; --rotate: 1238.4; --radius: 10.75; --speed: 3.4180669002414676; --delay: -1.108204498301666;"></div> |
| <div class="tree__light" style="--appear: 8; --y: 16; --rotate: 1209.6000000000001; --radius: 10.5; --speed: 4.495713975214219; --delay: -7.16630082687522;"></div> |
| <div class="tree__light" style="--appear: 9; --y: 18; --rotate: 1180.8; --radius: 10.25; --speed: 2.050188705878939; --delay: -8.897558901485858;"></div> |
| <div class="tree__light" style="--appear: 10; --y: 20; --rotate: 1152; --radius: 10; --speed: 0.879341071588815; --delay: -1.372285887568998;"></div> |
| <div class="tree__light" style="--appear: 11; --y: 22; --rotate: 1123.2; --radius: 9.75; --speed: 6.529368844448258; --delay: -5.810729343334522;"></div> |
| <div class="tree__light" style="--appear: 12; --y: 24; --rotate: 1094.4; --radius: 9.5; --speed: 5.980504355359351; --delay: -8.0343744180381;"></div> |
| <div class="tree__light" style="--appear: 13; --y: 26; --rotate: 1065.6000000000001; --radius: 9.25; --speed: 3.730059917047488; --delay: -6.6048171919530745;"></div> |
| <div class="tree__light" style="--appear: 14; --y: 28; --rotate: 1036.8; --radius: 9; --speed: 8.447176433821193; --delay: -2.930795225206919;"></div> |
| <div class="tree__light" style="--appear: 15; --y: 30; --rotate: 1008; --radius: 8.75; --speed: 2.8356860377165605; --delay: -4.288005150545953;"></div> |
| <div class="tree__light" style="--appear: 16; --y: 32; --rotate: 979.2; --radius: 8.5; --speed: 4.901932888595965; --delay: -7.760337395934407;"></div> |
| <div class="tree__light" style="--appear: 17; --y: 34; --rotate: 950.4; --radius: 8.25; --speed: 2.4410718943359044; --delay: -1.6426251216499121;"></div> |
| <div class="tree__light" style="--appear: 18; --y: 36; --rotate: 921.6; --radius: 8; --speed: 2.0493973792725373; --delay: -9.01034351819967;"></div> |
| <div class="tree__light" style="--appear: 19; --y: 38; --rotate: 892.8000000000001; --radius: 7.75; --speed: 4.090147886483462; --delay: -0.789389136081029;"></div> |
| <div class="tree__light" style="--appear: 20; --y: 40; --rotate: 864; --radius: 7.5; --speed: 1.3590459446093006; --delay: -9.876738535965146;"></div> |
| <div class="tree__light" style="--appear: 21; --y: 42; --rotate: 835.2; --radius: 7.25; --speed: 9.50349709646419; --delay: -0.2852392609827459;"></div> |
| <div class="tree__light" style="--appear: 22; --y: 44; --rotate: 806.4; --radius: 7; --speed: 3.0721768487078704; --delay: -4.567820117936774;"></div> |
| <div class="tree__light" style="--appear: 23; --y: 46; --rotate: 777.6; --radius: 6.75; --speed: 0.49456860352296017; --delay: -0.1164418214056262;"></div> |
| <div class="tree__light" style="--appear: 24; --y: 48; --rotate: 748.8000000000001; --radius: 6.5; --speed: 4.655998318405867; --delay: -8.80328724436508;"></div> |
| <div class="tree__light" style="--appear: 25; --y: 50; --rotate: 720; --radius: 6.25; --speed: 6.13195185823562; --delay: -7.575161141790594;"></div> |
| <div class="tree__light" style="--appear: 26; --y: 52; --rotate: 691.2; --radius: 6; --speed: 4.358165499421438; --delay: -9.247144771643343;"></div> |
| <div class="tree__light" style="--appear: 27; --y: 54; --rotate: 662.4; --radius: 5.75; --speed: 0.05097926779642714; --delay: -8.691745044020614;"></div> |
| <div class="tree__light" style="--appear: 28; --y: 56; --rotate: 633.6; --radius: 5.5; --speed: 8.742641210620313; --delay: -6.5295280902741855;"></div> |
| <div class="tree__light" style="--appear: 29; --y: 58; --rotate: 604.8000000000001; --radius: 5.25; --speed: 5.80185251364155; --delay: -7.609251669692513;"></div> |
| <div class="tree__light" style="--appear: 30; --y: 60; --rotate: 576; --radius: 5; --speed: 7.467315091727784; --delay: -8.634544168186384;"></div> |
| <div class="tree__light" style="--appear: 31; --y: 62; --rotate: 547.2; --radius: 4.75; --speed: 4.266345571182885; --delay: -5.264029758958855;"></div> |
| <div class="tree__light" style="--appear: 32; --y: 64; --rotate: 518.4; --radius: 4.5; --speed: 9.045502005126004; --delay: -2.690996107144532;"></div> |
| <div class="tree__light" style="--appear: 33; --y: 66; --rotate: 489.6; --radius: 4.25; --speed: 8.157526793190122; --delay: -7.994804794945352;"></div> |
| <div class="tree__light" style="--appear: 34; --y: 68; --rotate: 460.8; --radius: 4; --speed: 9.713885657603182; --delay: -3.1004172346881154;"></div> |
| <div class="tree__light" style="--appear: 35; --y: 70; --rotate: 432; --radius: 3.75; --speed: 2.4675983602710794; --delay: -6.147402437252795;"></div> |
| <div class="tree__light" style="--appear: 36; --y: 72; --rotate: 403.2; --radius: 3.5; --speed: 6.334757806600053; --delay: -4.68726311130985;"></div> |
| <div class="tree__light" style="--appear: 37; --y: 74; --rotate: 374.40000000000003; --radius: 3.25; --speed: 5.810077494998955; --delay: -0.5421184684789382;"></div> |
| <div class="tree__light" style="--appear: 38; --y: 76; --rotate: 345.6; --radius: 3; --speed: 3.1348261661348698; --delay: -1.8762379030616438;"></div> |
| <div class="tree__light" style="--appear: 39; --y: 78; --rotate: 316.8; --radius: 2.75; --speed: 1.7539981598254406; --delay: -0.39031038560793707;"></div> |
| <div class="tree__light" style="--appear: 40; --y: 80; --rotate: 288; --radius: 2.5; --speed: 2.5539355188740087; --delay: -4.450657635233652;"></div> |
| <div class="tree__light" style="--appear: 41; --y: 82; --rotate: 259.2; --radius: 2.25; --speed: 2.3603559140315844; --delay: -9.410370278145297;"></div> |
| <div class="tree__light" style="--appear: 42; --y: 84; --rotate: 230.4; --radius: 2; --speed: 3.3112783371999055; --delay: -0.7523735956343902;"></div> |
| <div class="tree__light" style="--appear: 43; --y: 86; --rotate: 201.6; --radius: 1.75; --speed: 1.7060416013304724; --delay: -9.109653019612438;"></div> |
| <div class="tree__light" style="--appear: 44; --y: 88; --rotate: 172.8; --radius: 1.5; --speed: 6.344643090661945; --delay: -6.583050358454807;"></div> |
| <div class="tree__light" style="--appear: 45; --y: 90; --rotate: 144; --radius: 1.25; --speed: 1.7389609219137059; --delay: -7.326224146231651;"></div> |
| <div class="tree__light" style="--appear: 46; --y: 92; --rotate: 115.2; --radius: 1; --speed: 8.606030099788386; --delay: -1.8678573148711752;"></div> |
| <div class="tree__light" style="--appear: 47; --y: 94; --rotate: 86.4; --radius: 0.75; --speed: 9.49674248980797; --delay: -3.592334423342276;"></div> |
| <div class="tree__light" style="--appear: 48; --y: 96; --rotate: 57.6; --radius: 0.5; --speed: 0.6238837869676761; --delay: -9.031351447299665;"></div> |
| <div class="tree__light" style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 0.25891891876878903; --delay: -3.4291538146903444;"></div> |
| </svg> |
| </div> |
| |
| </body> |
| </html> |
| |
| |
| <!DOCTYPE html> |
| <html lang="en" > |
| <head> |
| <meta charset="UTF-8"> |
| <title>我不说话</title> |
| <style type="text/css"> |
| <!-- |
| :root { |
| --background-color: #101B2A; |
| --tree-color: #1B885E; |
| --yellow: #FFFC5E; |
| } |
| |
| body{ |
| background: var(--background-color); |
| } |
| |
| .box-canvas{ |
| position: relative; |
| margin: auto; |
| display: block; |
| margin-top: 10vmin; |
| margin-bottom: 10vmin; |
| width: 80vmin; |
| height: 80vmin; |
| } |
| |
| |
| .tree { |
| position: absolute; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| bottom: 20vmin; |
| width: 0; |
| height: 0; |
| border-bottom: 32vmin solid var(--tree-color); |
| border-right: 32vmin solid transparent; |
| border-left: 32vmin solid transparent; |
| } |
| |
| |
| .tree::before { |
| content: ''; |
| position: absolute; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| bottom: -16vmin; |
| width: 0; |
| height: 0; |
| border-bottom: 27vmin solid var(--tree-color); |
| border-right: 27vmin solid transparent; |
| border-left: 27vmin solid transparent; |
| } |
| |
| |
| .tree::after { |
| content: ''; |
| position: absolute; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| bottom: 0vmin; |
| width: 0; |
| height: 0; |
| border-bottom: 19vmin solid var(--tree-color); |
| border-right: 19vmin solid transparent; |
| border-left: 19vmin solid transparent; |
| } |
| |
| |
| .trunk { |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| background-color: white; |
| width: 50vmin; |
| height: 10vmin; |
| border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%; |
| } |
| |
| |
| .trunk::before { |
| content: ''; |
| position: absolute; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| background-color: #CC7C06; |
| bottom: 0; |
| width: 10vmin; |
| height: 20vmin; |
| left: 50%; |
| } |
| |
| |
| |
| .trunk::after { |
| content: ''; |
| position: absolute; |
| background-color: white; |
| bottom: -5vmin; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| width: 40vmin; |
| height: 13vmin; |
| border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%; |
| } |
| |
| .star { |
| --star-color: rgba(255, 252, 2, 0.5); |
| |
| -webkit-animation: starFlash 2s infinite; |
| |
| animation: starFlash 2s infinite; |
| -webkit-animation-delay: 0.5s; |
| animation-delay: 0.5s; |
| position: absolute; |
| top: 2vmin; |
| left: 50%; |
| -webkit-transform: translateX(-50%); |
| transform: translateX(-50%); |
| width: 15vmin; |
| height: 15vmin; |
| -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| } |
| |
| .star::before { |
| --star-color: rgba(255, 252, 2, 0.7); |
| |
| -webkit-animation: starFlash 2s infinite; |
| |
| animation: starFlash 2s infinite; |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| content: ''; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| -webkit-transform: translate(-50%, -50%); |
| transform: translate(-50%, -50%); |
| width: 10vmin; |
| height: 10vmin; |
| -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| } |
| |
| .star::after { |
| --star-color: rgba(255, 252, 2, 1); |
| |
| -webkit-animation: starFlash 2s infinite; |
| |
| animation: starFlash 2s infinite; |
| content: ''; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| -webkit-transform: translate(-50%, -50%); |
| transform: translate(-50%, -50%); |
| width: 5vmin; |
| height: 5vmin; |
| -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| } |
| |
| @-webkit-keyframes starFlash { |
| 0% { |
| background-color: transparent; |
| } |
| |
| 90% { |
| background-color: var(--star-color); |
| } |
| } |
| |
| @keyframes starFlash { |
| 0% { |
| background-color: transparent; |
| } |
| |
| 90% { |
| background-color: var(--star-color); |
| } |
| } |
| |
| .lights-group { |
| --red-light: radial-gradient(#FF5B30, 60%, transparent); |
| --blue-light: radial-gradient(#00CFE4, 60%, transparent); |
| --yellow-light: radial-gradient(var(--yellow), 60%, transparent); |
| --pink-light: radial-gradient(#E43ACB, 60%, transparent); |
| |
| --light-change-interval: 1s; |
| |
| position: absolute; |
| height: 5vmin; |
| display: -webkit-box; |
| display: flex; |
| -webkit-transform: translateX(-50%) rotate(15deg); |
| transform: translateX(-50%) rotate(15deg); |
| } |
| |
| .lights-group.bottom { |
| left: 55%; |
| width: 45vmin; |
| bottom: 29vmin; |
| } |
| |
| .lights-group.top { |
| left: 55%; |
| width: 35vmin; |
| bottom: 47vmin; |
| } |
| |
| |
| .light { |
| width: 10vmin; |
| height: 5vmin; |
| border-radius: 50%; |
| box-shadow: 0px 3px 0 var(--background-color); |
| display: -webkit-box; |
| display: flex; |
| -webkit-box-pack: justify; |
| justify-content: space-between; |
| } |
| |
| |
| .light::before { |
| content: ''; |
| background: var(--yellow-light); |
| width: 3vmin; |
| height: 5vmin; |
| border-radius: 50%; |
| margin-top: 3vmin; |
| margin-left: -1.5vmin; |
| -webkit-animation: changeLightColor var(--light-change-interval) infinite; |
| animation: changeLightColor var(--light-change-interval) infinite; |
| } |
| |
| .bottom .light:nth-child(2)::before { |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| } |
| |
| .bottom .light:nth-child(3)::before { |
| -webkit-animation-delay: 0.5s; |
| animation-delay: 0.5s; |
| } |
| |
| .bottom .light:nth-child(4)::before { |
| -webkit-animation-delay: 0.75s; |
| animation-delay: 0.75s; |
| } |
| |
| .bottom .light::after { |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| } |
| |
| .top .light:nth-child(1)::before { |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| } |
| |
| .top .light:nth-child(2)::before { |
| -webkit-animation-delay: 5s; |
| animation-delay: 5s; |
| } |
| |
| .top .light:nth-child(3)::before { |
| -webkit-animation-delay: 0.75s; |
| animation-delay: 0.75s; |
| } |
| |
| .top .light:after { |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| } |
| |
| |
| |
| .light::after { |
| background: var(--yellow-light); |
| width: 3vmin; |
| height: 5vmin; |
| border-radius: 50%; |
| margin-top: 3vmin; |
| margin-right: -1.5vmin; |
| -webkit-animation: changeLightColor var(--light-change-interval) infinite; |
| animation: changeLightColor var(--light-change-interval) infinite; |
| } |
| |
| .light:last-child::after { |
| content: ''; |
| } |
| |
| @-webkit-keyframes changeLightColor { |
| 0% { |
| background: var(--yellow-light); |
| } |
| |
| 25% { |
| background: var(--pink-light); |
| } |
| |
| 50% { |
| background: var(--blue-light); |
| } |
| |
| 75% { |
| background: var(--red-light); |
| } |
| } |
| |
| @keyframes changeLightColor { |
| 0% { |
| background: var(--yellow-light); |
| } |
| |
| 25% { |
| background: var(--pink-light); |
| } |
| |
| 50% { |
| background: var(--blue-light); |
| } |
| |
| 75% { |
| background: var(--red-light); |
| } |
| } |
| --> |
| </style> |
| |
| |
| </head> |
| <body> |
| |
| <div class="box-canvas"> |
| <div class="trunk"></div> |
| <div class="tree"></div> |
| <div class="star"></div> |
| <div class="lights-group bottom"> |
| <div class="light"></div> |
| <div class="light"></div> |
| <div class="light"></div> |
| <div class="light"></div> |
| <div class="light"></div> |
| </div> |
| <div class="lights-group top"> |
| <div class="light"></div> |
| <div class="light"></div> |
| <div class="light"></div> |
| <div class="light"></div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
| <!DOCTYPE html> |
| <html lang="en" > |
| <head> |
| <meta charset="UTF-8"> |
| <title>圣诞快乐?</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| <style type="text/css"> |
| <!-- |
| :root { |
| --unit: 1.6vmin; |
| --width: calc(var(--unit) * 6); |
| --height: calc(var(--unit) * 8); |
| } |
| |
| ul, li { |
| position: absolute; |
| width: var(--width); |
| height: var(--height); |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%) var(--transform, translate(0,0)); |
| transform-style: preserve-3d; |
| z-index: -1; |
| } |
| li { |
| background: hsl(calc(var(--i) * 360 / var(--t)), 100%, 53%); |
| background: radial-gradient(circle, hsl(216, 88%, 86%) 22%, hsl(216, 88%, 26%) 22%) top center; |
| background-size: calc(var(--unit) * 1.5) calc(var(--unit) * 1.5); |
| --clip-path: polygon(0% 100%, 50% 0%, 100% 100%); |
| --transform: rotateY(calc(var(--i) * calc(360deg / var(--t)))) translateZ(calc(var(--width) * .09 * var(--t))) rotateX(0deg); |
| transform-origin: 50% 100%; |
| |
| -webkit-clip-path: var(--clip-path); |
| clip-path: var(--clip-path); |
| } |
| li:nth-of-type(even) { |
| --clip-path: polygon(0% 0%, 50% 100%, 100% 0%); |
| } |
| li:nth-of-type(6n + 2) { |
| background: linear-gradient(to right, hsl(343, 88%, 56%) 50%, hsl(343, 88%, 36%) 50%); |
| } |
| li:nth-of-type(6n + 3) { |
| background-image: linear-gradient(to bottom, hsl(143, 70%, 18%) 0vmin, hsl(143, 70%, 18%) 1.8vmin, hsl(143, 70%, 78%) 1.8vmin, hsl(143, 70%, 78%) 2vmin); |
| } |
| li:nth-of-type(6n + 4) { |
| background: |
| repeating-linear-gradient(135deg, hsla(347, 88%, 76%, 0) 0, hsla(347, 88%, 76%, 0) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * 1.5)), |
| repeating-linear-gradient(45deg, hsl(347, 88%, 46%) 0, hsl(347, 88%, 46%) var(--unit), hsl(143, 38%, 36%) var(--unit), hsl(143, 38%, 36%) calc(var(--unit) * 1.5)); |
| background-size: contain; |
| } |
| li:nth-of-type(6n + 5) { |
| background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%); |
| } |
| li:nth-of-type(6n + 6) { |
| --color: hsl(243, 8%, 86%); |
| --alt: hsl(342, 88%, 46%); |
| background: linear-gradient(to right, var(--color) 50%, hsl(243, 8%, 66%) 50%); |
| } |
| @supports ( background-image: repeating-conic-gradient(at 50% 36%, red 30deg, red 45deg, green 45deg, green 60deg)) { |
| li:nth-of-type(6n + 6) { |
| background-image: |
| repeating-conic-gradient(at 50% 36%, |
| var(--color) 30deg, |
| var(--color) 45deg, |
| var(--alt) 45deg, |
| var(--alt) 60deg); |
| } |
| } |
| ul { |
| top: 8vmin; |
| animation: display-case calc(var(--t) * 1000ms) infinite linear; |
| animation-direction: var(--direction, normal); |
| animation-delay: -10000ms; |
| } |
| .star { |
| animation-duration: calc(var(--t) * 4000ms); |
| } |
| .star li { |
| --clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
| --transform: translateY(-4vmin); |
| background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%); |
| } |
| |
| @keyframes display-case { |
| 0% { |
| transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit))); |
| } |
| 100% { |
| transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit))); |
| } |
| } |
| |
| |
| @keyframes topsy-turvy { |
| 0% { |
| transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg); |
| } |
| 50% { |
| transform: translate(-50%, -100%) rotateY(180deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(5deg); |
| } |
| 100% { |
| transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg); |
| } |
| } |
| |
| main { |
| width: 100vmin; |
| height: 100vmin; |
| transform-style: preserve-3d; |
| } |
| |
| body { |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| overflow: hidden; |
| perspective: 120vmin; |
| background: hsl(216, 80%, 12%); |
| background-image: radial-gradient(circle at 50% 55%, hsl(216, 80%, 32%), hsl(216, 80%, 22%) 24vmin, hsl(216, 80%, 12%) 44vmin); |
| } |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| --> |
| </style> |
| |
| </head> |
| <body> |
| |
| <main> |
| <ul class="star" style="--v: 1; --t: 1;"> |
| <li style="--i: 0"></li> |
| </ul> |
| <ul style="--v: 2; --t: 8; --direction:reverse"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| </ul> |
| <ul style="--v: 3; --t: 12"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| </ul> |
| <ul style="--v: 4; --t: 18; --direction:reverse"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| <li style="--i: 12"></li> |
| <li style="--i: 13"></li> |
| <li style="--i: 14"></li> |
| <li style="--i: 15"></li> |
| <li style="--i: 16"></li> |
| <li style="--i: 17"></li> |
| </ul> |
| <ul style="--v: 5; --t: 22"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| <li style="--i: 12"></li> |
| <li style="--i: 13"></li> |
| <li style="--i: 14"></li> |
| <li style="--i: 15"></li> |
| <li style="--i: 16"></li> |
| <li style="--i: 17"></li> |
| <li style="--i: 18"></li> |
| <li style="--i: 19"></li> |
| <li style="--i: 20"></li> |
| <li style="--i: 21"></li> |
| </ul> |
| <ul style="--v: 6; --t: 26; --direction:reverse"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| <li style="--i: 12"></li> |
| <li style="--i: 13"></li> |
| <li style="--i: 14"></li> |
| <li style="--i: 15"></li> |
| <li style="--i: 16"></li> |
| <li style="--i: 17"></li> |
| <li style="--i: 18"></li> |
| <li style="--i: 19"></li> |
| <li style="--i: 20"></li> |
| <li style="--i: 21"></li> |
| <li style="--i: 22"></li> |
| <li style="--i: 23"></li> |
| <li style="--i: 24"></li> |
| <li style="--i: 25"></li> |
| </ul> |
| <ul style="--v: 7; --t: 32"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| <li style="--i: 12"></li> |
| <li style="--i: 13"></li> |
| <li style="--i: 14"></li> |
| <li style="--i: 15"></li> |
| <li style="--i: 16"></li> |
| <li style="--i: 17"></li> |
| <li style="--i: 18"></li> |
| <li style="--i: 19"></li> |
| <li style="--i: 20"></li> |
| <li style="--i: 21"></li> |
| <li style="--i: 22"></li> |
| <li style="--i: 23"></li> |
| <li style="--i: 24"></li> |
| <li style="--i: 25"></li> |
| <li style="--i: 26"></li> |
| <li style="--i: 27"></li> |
| <li style="--i: 28"></li> |
| <li style="--i: 29"></li> |
| <li style="--i: 30"></li> |
| <li style="--i: 31"></li> |
| </ul> |
| <ul style="--v: 8; --t: 36; --direction:reverse"> |
| <li style="--i: 0"></li> |
| <li style="--i: 1"></li> |
| <li style="--i: 2"></li> |
| <li style="--i: 3"></li> |
| <li style="--i: 4"></li> |
| <li style="--i: 5"></li> |
| <li style="--i: 6"></li> |
| <li style="--i: 7"></li> |
| <li style="--i: 8"></li> |
| <li style="--i: 9"></li> |
| <li style="--i: 10"></li> |
| <li style="--i: 11"></li> |
| <li style="--i: 12"></li> |
| <li style="--i: 13"></li> |
| <li style="--i: 14"></li> |
| <li style="--i: 15"></li> |
| <li style="--i: 16"></li> |
| <li style="--i: 17"></li> |
| <li style="--i: 18"></li> |
| <li style="--i: 19"></li> |
| <li style="--i: 20"></li> |
| <li style="--i: 21"></li> |
| <li style="--i: 22"></li> |
| <li style="--i: 23"></li> |
| <li style="--i: 24"></li> |
| <li style="--i: 25"></li> |
| <li style="--i: 26"></li> |
| <li style="--i: 27"></li> |
| <li style="--i: 28"></li> |
| <li style="--i: 29"></li> |
| <li style="--i: 30"></li> |
| <li style="--i: 31"></li> |
| <li style="--i: 32"></li> |
| <li style="--i: 33"></li> |
| <li style="--i: 34"></li> |
| <li style="--i: 35"></li> |
| </ul> |
| </main> |
| |
| </body> |
| </html> |
| |
就这么简单
【推荐】FFA 2024大会视频回放:Apache Flink 的过去、现在及未来
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
· Pascal 架构 GPU 在 vllm下的模型推理优化
· WinForm 通用权限框架,简单实用支持二次开发
· 如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· 面试官:DNS解析都整不明白,敢说你懂网络?我:嘤嘤嘤!
· 双语对照的 PDF 翻译工具「GitHub 热点速览」