<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嘈杂的声音</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap");*{padding:0;margin:0 auto;box-sizing:border-box}body{background-image:radial-gradient(circle,#333,#000 800px);min-height:100vh;display:grid;place-items:center}.noise{position:relative;width:287px;height:36px;border:none;background:none;font-family:"Josefin Sans",sans-serif;font-size:24px;color:#fff;cursor:pointer}.noise::after{content:"Hover for Noise";opacity:var(--op,1);transition:opacity 0.4s}.noise > i{position:absolute;left:var(--left,0);top:50%;width:3px;height:72px;transform:translateY(-50%) scaleY(var(--sy,0));z-index:-1;transition:transform var(--duration) ease-out}.noise > i::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#fff,hsl(var(--hue,0),75%,75%));border-radius:50%;-webkit-animation:noise var(--duration) infinite ease-in-out alternate;animation:noise var(--duration) infinite ease-in-out alternate;-webkit-animation-play-state:var(--aps,paused);animation-play-state:var(--aps,paused)}@-webkit-keyframes noise{0%{transform:scaleY(calc(1 - (var(--size,0))))}100%{transform:scaleY(calc(1 + (var(--size,0))))}}@keyframes noise{0%{transform:scaleY(calc(1 - (var(--size,0))))}100%{transform:scaleY(calc(1 + (var(--size,0))))}}.noise > i:nth-child(1){--left:0px;--duration:247ms;--size:0.118;--hue:0}.noise > i:nth-child(2){--left:4px;--duration:293ms;--size:0.057;--hue:5}.noise > i:nth-child(3){--left:8px;--duration:372ms;--size:0.979;--hue:10}.noise > i:nth-child(4){--left:12px;--duration:375ms;--size:0.666;--hue:15}.noise > i:nth-child(5){--left:16px;--duration:222ms;--size:0.756;--hue:20}.noise > i:nth-child(6){--left:20px;--duration:268ms;--size:0.563;--hue:25}.noise > i:nth-child(7){--left:24px;--duration:296ms;--size:0.358;--hue:30}.noise > i:nth-child(8){--left:28px;--duration:277ms;--size:0.808;--hue:35}.noise > i:nth-child(9){--left:32px;--duration:365ms;--size:0.463;--hue:40}.noise > i:nth-child(10){--left:36px;--duration:258ms;--size:0.896;--hue:45}.noise > i:nth-child(11){--left:40px;--duration:388ms;--size:0.499;--hue:50}.noise > i:nth-child(12){--left:44px;--duration:286ms;--size:0.027;--hue:55}.noise > i:nth-child(13){--left:48px;--duration:305ms;--size:0.724;--hue:60}.noise > i:nth-child(14){--left:52px;--duration:280ms;--size:0.275;--hue:65}.noise > i:nth-child(15){--left:56px;--duration:306ms;--size:0.634;--hue:70}.noise > i:nth-child(16){--left:60px;--duration:377ms;--size:0.845;--hue:75}.noise > i:nth-child(17){--left:64px;--duration:278ms;--size:0.031;--hue:80}.noise > i:nth-child(18){--left:68px;--duration:363ms;--size:0.551;--hue:85}.noise > i:nth-child(19){--left:72px;--duration:243ms;--size:0.523;--hue:90}.noise > i:nth-child(20){--left:76px;--duration:273ms;--size:0.307;--hue:95}.noise > i:nth-child(21){--left:80px;--duration:310ms;--size:0.817;--hue:100}.noise > i:nth-child(22){--left:84px;--duration:278ms;--size:0.695;--hue:105}.noise > i:nth-child(23){--left:88px;--duration:327ms;--size:0.105;--hue:110}.noise > i:nth-child(24){--left:92px;--duration:384ms;--size:0.427;--hue:115}.noise > i:nth-child(25){--left:96px;--duration:288ms;--size:0.821;--hue:120}.noise > i:nth-child(26){--left:100px;--duration:292ms;--size:0.704;--hue:125}.noise > i:nth-child(27){--left:104px;--duration:341ms;--size:0.364;--hue:130}.noise > i:nth-child(28){--left:108px;--duration:398ms;--size:0.467;--hue:135}.noise > i:nth-child(29){--left:112px;--duration:393ms;--size:0.074;--hue:140}.noise > i:nth-child(30){--left:116px;--duration:220ms;--size:0.238;--hue:145}.noise > i:nth-child(31){--left:120px;--duration:213ms;--size:0.458;--hue:150}.noise > i:nth-child(32){--left:124px;--duration:387ms;--size:0.808;--hue:155}.noise > i:nth-child(33){--left:128px;--duration:258ms;--size:0.83;--hue:160}.noise > i:nth-child(34){--left:132px;--duration:349ms;--size:0.236;--hue:165}.noise > i:nth-child(35){--left:136px;--duration:372ms;--size:0.673;--hue:170}.noise > i:nth-child(36){--left:140px;--duration:368ms;--size:0.204;--hue:175}.noise > i:nth-child(37){--left:144px;--duration:248ms;--size:0.353;--hue:180}.noise > i:nth-child(38){--left:148px;--duration:367ms;--size:0.819;--hue:185}.noise > i:nth-child(39){--left:152px;--duration:332ms;--size:0.091;--hue:190}.noise > i:nth-child(40){--left:156px;--duration:274ms;--size:0.972;--hue:195}.noise > i:nth-child(41){--left:160px;--duration:315ms;--size:0.647;--hue:200}.noise > i:nth-child(42){--left:164px;--duration:278ms;--size:0.806;--hue:205}.noise > i:nth-child(43){--left:168px;--duration:206ms;--size:0.976;--hue:210}.noise > i:nth-child(44){--left:172px;--duration:235ms;--size:0.028;--hue:215}.noise > i:nth-child(45){--left:176px;--duration:312ms;--size:0.183;--hue:220}.noise > i:nth-child(46){--left:180px;--duration:229ms;--size:0.983;--hue:225}.noise > i:nth-child(47){--left:184px;--duration:260ms;--size:0.958;--hue:230}.noise > i:nth-child(48){--left:188px;--duration:361ms;--size:0.18;--hue:235}.noise > i:nth-child(49){--left:192px;--duration:286ms;--size:0.346;--hue:240}.noise > i:nth-child(50){--left:196px;--duration:214ms;--size:0.174;--hue:245}.noise > i:nth-child(51){--left:200px;--duration:202ms;--size:0.883;--hue:250}.noise > i:nth-child(52){--left:204px;--duration:354ms;--size:0.701;--hue:255}.noise > i:nth-child(53){--left:208px;--duration:385ms;--size:0.294;--hue:260}.noise > i:nth-child(54){--left:212px;--duration:366ms;--size:0.66;--hue:265}.noise > i:nth-child(55){--left:216px;--duration:312ms;--size:0.137;--hue:270}.noise > i:nth-child(56){--left:220px;--duration:268ms;--size:0.295;--hue:275}.noise > i:nth-child(57){--left:224px;--duration:345ms;--size:0.629;--hue:280}.noise > i:nth-child(58){--left:228px;--duration:325ms;--size:0.881;--hue:285}.noise > i:nth-child(59){--left:232px;--duration:202ms;--size:0.324;--hue:290}.noise > i:nth-child(60){--left:236px;--duration:219ms;--size:0.06;--hue:295}.noise > i:nth-child(61){--left:240px;--duration:279ms;--size:0.269;--hue:300}.noise > i:nth-child(62){--left:244px;--duration:348ms;--size:0.83;--hue:305}.noise > i:nth-child(63){--left:248px;--duration:347ms;--size:0.341;--hue:310}.noise > i:nth-child(64){--left:252px;--duration:230ms;--size:0.401;--hue:315}.noise > i:nth-child(65){--left:256px;--duration:399ms;--size:0.417;--hue:320}.noise > i:nth-child(66){--left:260px;--duration:320ms;--size:0.278;--hue:325}.noise > i:nth-child(67){--left:264px;--duration:213ms;--size:0.687;--hue:330}.noise > i:nth-child(68){--left:268px;--duration:251ms;--size:0.727;--hue:335}.noise > i:nth-child(69){--left:272px;--duration:326ms;--size:0.702;--hue:340}.noise > i:nth-child(70){--left:276px;--duration:259ms;--size:0.176;--hue:345}.noise > i:nth-child(71){--left:280px;--duration:372ms;--size:0.349;--hue:350}.noise > i:nth-child(72){--left:284px;--duration:228ms;--size:0.631;--hue:355}.noise:hover{--sy:1;--aps:running;--op:0}
</style>
</head>
<body>
<button class="noise">
<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>
<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>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i>
</button>
</body>
</html>
