<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>彩色像素骷髅</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="external nofollow"
/>
<style>
#count{display:none;}canvas{display:none;}:root{--tile-size:0.7vmin;--distance:1vmin;}@property --x{syntax:'<length>';initial-value:0;inherits:true;}@property --y{syntax:'<length>';initial-value:0;inherits:true;}@property --scale{syntax:'<number>';initial-value:1;inherits:true;}#tiles{filter:drop-shadow(0 0 1rem black);display:grid;place-items:center;cursor:pointer;translate:0 -12vh;}#tiles > div{border-radius:50%;width:var(--tile-size);aspect-ratio:1;background:hsla(var(--hue),100%,calc(50% + var(--light) * 50%),1);position:absolute;transform:translate3d(var(--x),var(--y),0) scale(var(--scale));--delay:calc(var(--p-r) * 1s);--hue:calc(var(--p-r) * (361 - 80) + 80);--light:calc((var(--p-r) * (0.5 - 0.05) + -0.05));--duration:calc(var(--p-r2) * 10s);}#tiles.show > div{-webkit-animation:fade-in 0.3s linear forwards,show var(--duration) var(--delay) cubic-bezier(0.86,0.86,0.41,1.16)
infinite,blink 1s var(--delay) ease-in-out infinite;animation:fade-in 0.3s linear forwards,show var(--duration) var(--delay) cubic-bezier(0.86,0.86,0.41,1.16)
infinite,blink 1s var(--delay) ease-in-out infinite;}@-webkit-keyframes blink{from,50%,to{opacity:1;}30%,70%{opacity:0.3;}}@keyframes blink{from,50%,to{opacity:1;}30%,70%{opacity:0.3;}}@-webkit-keyframes fade-in{from{opacity:0;}to{opacity:1;}}@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes show{from{--x:calc(1dvw * var(--p-r));--y:calc(-100dvh * var(--p-r));filter:blur(0.5rem);--scale:calc(clamp(1.5,10 * var(--p-r2),5));}5%{filter:blur(0rem);}10%{--x:calc(var(--p-x) * var(--distance));--y:calc(var(--p-y) * var(--distance));--scale:calc(1);}to{--x:calc(var(--p-x) * var(--distance));--y:calc(var(--p-y) * var(--distance));}}@keyframes show{from{--x:calc(1dvw * var(--p-r));--y:calc(-100dvh * var(--p-r));filter:blur(0.5rem);--scale:calc(clamp(1.5,10 * var(--p-r2),5));}5%{filter:blur(0rem);}10%{--x:calc(var(--p-x) * var(--distance));--y:calc(var(--p-y) * var(--distance));--scale:calc(1);}to{--x:calc(var(--p-x) * var(--distance));--y:calc(var(--p-y) * var(--distance));}}body{width:100vw;height:100vh;display:grid;place-items:center;background:conic-gradient(at 50% 52%,#180a3e,black,black,#180a3e);color:#ee75d2;margin:0;overflow:clip;cursor:pointer;}*{box-sizing:border-box;}a.labs-follow-me{left:2rem;right:2rem;bottom:1rem;top:unset;text-align:center;}</style>
</head>
<body>
<div id="tiles" class="show"></div>
<div id="count" class="content">☠</div>
<canvas id="canvas"></canvas>
<script>const counts=count.innerText;const size=110;const ctx=canvas.getContext('2d');const font=`bold ${size}px monospace`;ctx.font=font;const metrics=ctx.measureText(counts);canvas.width=metrics.width;canvas.height=size;ctx.fillStyle='white';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.font=font;ctx.fillStyle='black';ctx.fillText(counts,0,canvas.height);const{data}=ctx.getImageData(0,0,canvas.width,canvas.height);const length=data.length;const pixels=[];let x=0,y=0;const centerX=canvas.width/2;const centerY=canvas.height/2;for(let i=0;i<length;i+=4){const pixel={hit:data[i]!==255,i,x:x-centerX,y:y-centerY,};if(data[i]===0){pixels.push(pixel)}x++;if(x===canvas.width){x=0;y++}}pixels.forEach(({x,y},index)=>{const tile=document.createElement('div');tile.style.setProperty('--p-x',`${x}`);tile.style.setProperty('--p-y',`${y}`);tile.style.setProperty('--p-i',`${index}`);tile.style.setProperty('--p-r',`${Math.random()}`);tile.style.setProperty('--p-r2',`${Math.random()}`);tiles.appendChild(tile)});document.addEventListener('click',()=>{tiles.classList.remove('show');requestAnimationFrame(()=>{tiles.classList.add('show')})});</script>
</body>
</html>
!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="renderer" content="webkit" /> <meta name="force-rendering" content="webkit" /> <title></title> </head> <style> body {display: flex;justify-content: center;align-items: center; height: 100vh; overflow: hidden;background-color: #fff;} :root{--bg:#b5371e;--cup:#fff;--milk:#efd4b7;--foam:#b06643;--coffee:#2b1007;--shadow:#4e1911;}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg);}.art{width:80vmin;height:80vmin;position:relative;display:flex;align-items:center;justify-content:center;perspective:200vmin;transform-style:preserve-3d;}.art *{position:absolute;}.cup{z-index:1;width:43.75vmin;height:44.75vmin;background:radial-gradient(circle at 90% 92%,#fff0 0 2.25vmin,var(--foam) calc(2.25vmin + 1px) 11vmin,#fff0 0 100%),radial-gradient(circle at 95% 90%,#fff0 0 7vmin,var(--foam) calc(7vmin + 1px) 11vmin,#fff0 0 100%),radial-gradient(circle at 50% 50%,#fff0 15vmin,var(--foam) calc(15vmin + 1px) 16vmin,var(--milk) calc(16vmin + 1px) 18.25vmin,var(--cup) calc(18.25vmin + 1px) 100%),radial-gradient(circle at 52% 52%,#fff0 15vmin,var(--foam) calc(15vmin + 1px) 17vmin,#fff0 0 100%),radial-gradient(circle at 24% 34%,var(--foam) 7vmin,#fff0 calc(7vmin + 1px) 100%),radial-gradient(circle at 23% 35%,var(--foam) 7vmin,#fff0 calc(7vmin + 1px) 100%),radial-gradient(circle at 22% 36%,var(--foam) 7vmin,#fff0 calc(7vmin + 1px) 100%),radial-gradient(circle at 21.5% 37%,var(--foam) 7vmin,#fff0 calc(7vmin + 1px) 100%);background-color:var(--coffee);margin-top:-2.75vmin;margin-left:1.5vmin;border-radius:100%;background-repeat:no-repeat;background-position:7.5vmin 23vmin,15vmin 7vmin,0 0,0 0,0 0,0 0,0 0,0 0;background-size:3vmin 3vmin,10vmin 9vmin,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;}.cup:before{content:"";position:absolute;width:15vmin;height:6.5vmin;background:linear-gradient(90deg,var(--cup) 5vmin,#fff0 0 100%),radial-gradient(circle at 50% 50%,var(--cup) 6vmin,#fff0 calc(6vmin + 1px) 100%);bottom:6.75vmin;transform:rotate(30deg);right:-11.5vmin;}.bubbles{width:26vmin;height:32vmin;top:6vmin;left:5.5vmin;background:#fff0;}.bubbles i{--top:6vmin;--left:4.5vmin;--scl:0.125;width:5.5vmin;height:5.5vmin;top:var(--top);left:var(--left);background:var(--coffee);border-radius:100%;box-sizing:border-box;border-width:0 0 1px 1px;border-color:#0008 #0008 #fff4 #fff4;border-style:solid;transform:rotate(-45deg) scale(var(--scl));box-shadow:-1px 1px 5px #fff8;}.bubbles i:before,.bubbles i:after{content:"";position:absolute;width:4.5vmin;height:4.5vmin;border-radius:100%;transform:rotate(81deg);left:0.4vmin;top:0.5vmin;filter:blur(1px) drop-shadow(0px 2px 0px var(--milk));background:radial-gradient(circle at 58% 180%,#fff0 3vmin,var(--milk) calc(3vmin + 1px));background-repeat:no-repeat;background-position:0 0;background-size:4vmin 2vmin;}.bubbles i:after{width:2vmin;height:1vmin;border:0.25vmin solid var(--milk);border-width:0.25vmin 0.15vmin 0.5vmin 0.5vmin;transform:rotate(68deg);left:1.25vmin;top:0.8vmin;border-color:#fff0 #fff0 #fff0 var(--milk);background:#fff0;}.bubbles i:nth-child(1){--top:28.75vmin;--left:10vmin;}.bubbles i:nth-child(2){--scl:0.15;--top:27.5vmin;--left:6.5vmin;}.bubbles i:nth-child(3){--scl:0.135;--top:27.1vmin;--left:5.75vmin;}.bubbles i:nth-child(4){--top:17.5vmin;--left:-0.75vmin;}.bubbles i:nth-child(5){--scl:0.25;--top:16.35vmin;--left:-1.15vmin;}.bubbles i:nth-child(6){--top:14.85vmin;--left:-1vmin;}.bubbles i:nth-child(7){--scl:0.165;--top:14.65vmin;--left:0.35vmin;}.bubbles i:nth-child(8){--top:14.2vmin;--left:1.55vmin;}.bubbles i:nth-child(9){--scl:0.175;--top:14.1vmin;--left:-1.7vmin;}.bubbles i:nth-child(10){--scl:0.2;--top:13.35vmin;--left:3.5vmin;}.bubbles i:nth-child(11){--scl:0.5;--top:12.5vmin;--left:0.5vmin;}.bubbles i:nth-child(12){--top:11.25vmin;--left:-1vmin;}.bubbles i:nth-child(13){--scl:0.25;--top:10vmin;--left:-1vmin;}.bubbles i:nth-child(14){--scl:0.225;--top:8.8vmin;--left:0.5vmin;}.bubbles i:nth-child(15){--scl:0.35;--top:10.4vmin;--left:4.35vmin;}.bubbles i:nth-child(16){--scl:0.25;--top:8.75vmin;--left:7.5vmin;}.bubbles i:nth-child(17){--scl:1;--top:5.95vmin;--left:4.5vmin;}.bubbles i:nth-child(18){--top:5.95vmin;--left:8.5vmin;}.bubbles i:nth-child(19){--scl:0.4;--top:1vmin;--left:8.5vmin;}.bubbles i:nth-child(20){--scl:0.175;--top:1vmin;--left:5.5vmin;}.bubbles i:nth-child(21){--top:0.1vmin;--left:6.5vmin;}.bubbles i:nth-child(22){--top:-1vmin;--left:9.25vmin;}.bubbles i:nth-child(23){--scl:0.185;--top:-0.5vmin;--left:11.25vmin;}.bubbles i:nth-child(24){--top:-1.5vmin;--left:12.25vmin;}.bubbles i:nth-child(25){--scl:0.285;--top:-1.35vmin;--left:14.25vmin;}.bubbles i:nth-child(26){--top:-1.45vmin;--left:15.5vmin;}.bubbles i:nth-child(27){--scl:0.15;--top:-1vmin;--left:16.35vmin;}.bubbles i:nth-child(28){--top:-0.1vmin;--left:19.75vmin;}.bubbles i:nth-child(29){--scl:0.185;--top:0.1vmin;--left:20.85vmin;}.bubbles i:nth-child(30){--top:0.75vmin;--left:22.65vmin;}.shadow{background:var(--shadow);width:48vmin;height:55vmin;border-radius:0% 0% 100% 100%;bottom:5vmin;left:-2vmin;transform:rotate(30deg) rotateX(40deg);z-index:0;transform-style:preserve-3d;transform-origin:50% 100%;}.shadow:before{content:"";position:absolute;width:11vmin;height:21vmin;border:5vmin solid var(--shadow);left:38vmin;top:3vmin;border-radius:100%;border-top-width:4.5vmin;border-bottom-width:5vmin;}.inner-shadow{width:36.5vmin;height:36.5vmin;background:radial-gradient(circle at 36% 88%,#fff0 21.5vmin,#0004 calc(21.5vmin + 1px));left:3.5vmin;top:4vmin;border-radius:100%;} </style> <body> <div class="art"> <div class="cup"> <div class="inner-shadow"></div> <div class="bubbles"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> </div> </div> <div class="shadow"></div> </div> </body> <script></script> </html>
