圣诞树—卷死你们
我就要把你们男朋友卷死
先看视频
<!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>
就这么简单
浙公网安备 33010602011771号