2021-12-16 21:13阅读: 7评论: 0推荐: 0

圣诞树—卷死你们

我就要把你们男朋友卷死

先看视频

 <!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;
}
 
/* Bottom tree piece */
.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 middle */
.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 top */
.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;
}
 
/* Snow back of trunk */
.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 */
.trunk::before {
  content: '';
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #CC7C06;
  bottom: 0;
  width: 10vmin;
  height: 20vmin;
  left: 50%;
}
 
 
/* Snow front of trunk */
.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;
}
 
/* Curl of cord */
.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 left */
.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 right */
.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>

就这么简单

上一篇关与Tensorflow-gpu Anaconda Pycharm配置问题解决方案

下一篇ROS 自主构图使用turtlebot3仿真gmapping 学习记录

本文作者：Yang-blackSun

本文链接：https://www.cnblogs.com/Yang-blackSun/p/18025376

本文作者：Yang-blackSun

本文链接：https://www.cnblogs.com/Yang-blackSun/p/18025376

posted @ 2021-12-16 21:13 Yang-blackSun 阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

ClingYang

圣诞树—卷死你们

我就要把你们男朋友卷死

先看视频

公告

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (51)

随笔档案 (45)

文章档案 (2)

阅读排行榜

最新评论

	<!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=xx+yy,
	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+x8,U+y8),
	lineTo(U+xU,U+yU),
	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/H20+((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(ii)+T(D5+ii)*5)%W)>>0,
	((113i+(Di)/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;
	}

	/* Bottom tree piece */
	.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 middle */
	.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 top */
	.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;
	}

	/* Snow back of trunk */
	.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 */
	.trunk::before {
	content: '';
	position: absolute;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #CC7C06;
	bottom: 0;
	width: 10vmin;
	height: 20vmin;
	left: 50%;
	}


	/* Snow front of trunk */
	.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;
	}

	/* Curl of cord */
	.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 left */
	.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 right */
	.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>