暴躁码农在线讨薪！！！给佬友看看

brownfoxsir · February 8, 2025, 2:56am

wwow · February 8, 2025, 2:57am

今天看到了几个，哈哈哈

brownfoxsir · February 8, 2025, 2:58am

哈哈哈多少有点快了

martin98ks · February 8, 2025, 2:59am

牛逼，现在直接关闭了啊

hiraeth · February 8, 2025, 2:59am

神奇的是搜索引擎搜索出来点进去访问不了，直接输入域名可以访问

suxiaomi · February 8, 2025, 3:00am

访问不了了

StellaFortuna · February 8, 2025, 3:02am

码农技术能力不太行 (我乱说的可以随便喷我 )
竟然不整好看一点
整一个“还钱流星雨 ”

例子1-纯CSS

<!DOCTYPE html>
<html>
<head>
<title>炫彩还钱流星雨</title>
<style>
body {
  margin: 0;
  overflow: hidden;
  /* 渐变星空背景*/
  background: linear-gradient(to bottom, #0a0a2e, #040018, #02000c);
  font-family: 'Arial Black', sans-serif; /* 科技感字体 */
  color: #fff;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5em; /* 中心文本 */
  white-space: nowrap;
  opacity: 0;
  animation: fadeInOut 5s forwards;
  /*  炫彩的文字发光效果，多层阴影 */
  text-shadow:
    0 0 5px #00ffff,  /* 青色外层光晕 */
    0 0 15px #00ffff,
    0 0 30px #00ffff,
    0 0 50px #ff00ff,  /* 紫红色内层核心光 */
    0 0 70px #ff00ff;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5vw, 1fr));
  grid-gap: 0.5vw;
}

.rain {
  position: relative;
  font-size: 1.3em; /* 流星字体 */
  white-space: nowrap;
  /*  流星颜色随机 */
  color: hsl(var(--hue), 100%, 70%); /* 使用 HSL 色彩模式 */
  /*  流星发光效果，颜色与自身颜色呼应 */
  text-shadow: 0 0 8px hsl(var(--hue), 100%, 80%);
  animation: rainFall 4s linear infinite, /* 流星速度 */
             randomStart 0.5s steps(100) infinite,
             hueRotate 10s linear infinite; /*  色相旋转动画，让流星颜色动态变化 */
  animation-delay: calc(var(--random-delay) * -1s);
}

@keyframes rainFall {
  0% { transform: translateY(-10vh) rotateZ(10deg); opacity: 1; } 
  100% { transform: translateY(110vh) rotateZ(-10deg); opacity: 0; } /*  结束时略微反向倾斜 */
}

@keyframes randomStart {
  0% { left: 0; }
  100% { left: calc(var(--random-left) * 100vw); }
}

@keyframes hueRotate {
  0% { filter: hue-rotate(0deg); } /* 初始色相 */
  100% { filter: hue-rotate(360deg); } /* 旋转 360 度，颜色循环 */
}


/*  随机颜色和延迟 */
.rain:nth-child(1) { --random-delay: 0.1; --random-left: 0.1; --hue: 180; } /* 青色 */
.rain:nth-child(2) { --random-delay: 0.3; --random-left: 0.9; --hue: 240; } /* 蓝色 */
.rain:nth-child(3) { --random-delay: 0.5; --random-left: 0.2; --hue: 300; } /* 紫色 */
.rain:nth-child(4) { --random-delay: 0.7; --random-left: 0.7; --hue: 0;   } /* 红色 */
.rain:nth-child(5) { --random-delay: 0.9; --random-left: 0.4; --hue: 60;  } /* 黄色 */
.rain:nth-child(6) { --random-delay: 0.2; --random-left: 0.6; --hue: 120; } /* 绿色 */
.rain:nth-child(7) { --random-delay: 0.4; --random-left: 0.3; --hue: 210; } /* 深青色 */
.rain:nth-child(8) { --random-delay: 0.6; --random-left: 0.8; --hue: 270; } /* 深紫色 */
.rain:nth-child(9) { --random-delay: 0.8; --random-left: 0.5; --hue: 30;  } /* 橙色 */
.rain:nth-child(10) { --random-delay: 0;   --random-left: 0;   --hue: 90;  } /* 浅绿色 */
.rain:nth-child(11) { --random-delay: 0.15; --random-left: 0.85; --hue: 330;} /* 粉色 */
.rain:nth-child(12) { --random-delay: 0.35; --random-left: 0.25; --hue: 150;} /* 蓝绿色 */
.rain:nth-child(13) { --random-delay: 0.55; --random-left: 0.75; --hue: 30; }  /* 橙色 */
.rain:nth-child(14) { --random-delay: 0.75; --random-left: 0.35; --hue: 210;} /* 深青色 */
.rain:nth-child(15) { --random-delay: 0.95; --random-left: 0.65; --hue: 300;} /* 紫色 */
.rain:nth-child(16) { --random-delay: 0.25; --random-left: 0.15; --hue: 60; }  /* 黄色 */
.rain:nth-child(17) { --random-delay: 0.45; --random-left: 0.95; --hue: 240;} /* 蓝色 */
.rain:nth-child(18) { --random-delay: 0.65; --random-left: 0.45; --hue: 0;   } /* 红色 */
.rain:nth-child(19) { --random-delay: 0.85; --random-left: 0.55; --hue: 120;} /* 绿色 */
.rain:nth-child(20) { --random-delay: 0.05; --random-left: 0.05; --hue: 270;} /* 深紫色 */


</style>
</head>
<body>
  <div class="container">
    <div class="center-text">码农的钱你都敢吞  RNM还钱</div>
    <div class="rain-container">
      <!--  流星  -->
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
      <span class="rain">还钱</span>
    </div>
  </div>
</body>
</html>

例子2-CSS+JavaScript

<!DOCTYPE html>
<html>
<head>
<title>朴实无华流星雨😇</title>
<style>
body {
  margin: 0;
  overflow: hidden;
  /* 深邃星空背景 - 更暗更神秘 */
  background: linear-gradient(to bottom, #05051a, #000000, #000000);
  font-family: '黑体', sans-serif; /* 强硬字体 */
  color: #fff;
  user-select: none; /* 禁止用户选择文字，沉浸体验 */
  cursor: default; 
  overflow: hidden; 
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em; /* 中心文本 */
  white-space: nowrap;
  opacity: 1; /* 压迫感 */
  animation: pulseText 2s infinite alternate, hueRotateText 15s linear infinite; /* 呼吸和色彩变化动画 */
  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff,
    0 0 40px #00ffff,
    0 0 60px #ff00ff,
    0 0 80px #ff00ff,
    0 0 100px #ff00ff; /* 发光效果 */
}

@keyframes pulseText {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.05); } /* 放大缩小 */
}

@keyframes hueRotateText {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); } /* 中心文字加入色彩循环 */
}


.rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex; /* Flexbox 布局 */
  flex-direction: column; /* 垂直排列 */
}

.rain-column {
  flex: 1; /* 让每一列平分宽度 */
  display: flex;
  flex-direction: column; /* 列内文字垂直排列 */
  align-items: center; /* 文字水平居中 */
  justify-content: flex-start; /* 文字顶部对齐，让流星从上方落下 */
  overflow: hidden; /* 裁剪超出列的内容 */
}

.rain {
  font-size: 1.5em; /* 流星字体 */
  white-space: nowrap;
  color: hsl(var(--hue), 100%, 75%); /* 流星颜色 */
  text-shadow:
    0 0 6px hsl(var(--hue), 100%, 80%),
    0 0 12px hsl(var(--hue), 100%, 85%); /* 流星发光效果 */
  animation: rainFall 3s linear infinite, /* 流星速度 */
             randomStart 0.5s steps(100) infinite,
             hueRotate 10s linear infinite,
             flicker 0.8s steps(10) infinite; /*  闪烁效果 */
  animation-delay: calc(var(--random-delay) * -1s);
  opacity: 0.9; /* 增加层次感 */
}

@keyframes rainFall {
  0% { transform: translateY(-15vh) rotateZ(15deg); opacity: 1; } 
  100% { transform: translateY(115vh) rotateZ(-15deg); opacity: 0; } 
}

@keyframes randomStart {
  0% { transform: translateX(0); } /* 使用 translateX */
  100% { transform: translateX(calc(var(--random-left) * 100vw)); }
}

@keyframes hueRotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes flicker {
  0%, 100% { text-shadow:
    0 0 6px hsl(var(--hue), 100%, 80%),
    0 0 12px hsl(var(--hue), 100%, 85%); }
  50% { text-shadow: none; } /*  中间帧去除阴影，造成闪烁 */
}


/* 粒子效果样式 */
.particle {
  position: absolute;
  width: 6px; /* 粒子大小 */
  height: 6px;
  border-radius: 50%;
  background: #fff; /* 粒子颜色 */
  opacity: 0.7;
  pointer-events: none; /* 穿透鼠标事件 */
  animation: particleFall linear infinite, particleFadeOut linear infinite;
  animation-duration: calc(var(--particle-duration) * 1s);
  animation-delay: calc(var(--particle-delay) * -1s);
  transform: translateY(-20vh); /* 初始位置在屏幕上方 */
}

@keyframes particleFall {
  0% { transform: translateY(-20vh) scale(1); }
  100% { transform: translateY(120vh) scale(0.2); } /*  向下移动并缩小 */
}

@keyframes particleFadeOut {
  0% { opacity: 0.8; }
  100% { opacity: 0; } /*  逐渐消失 */
}


/*  随机颜色和延迟 */
.rain:nth-child(1) { --random-delay: 0.1; --random-left: 0.05; --hue: 190; } /* 青蓝 */
.rain:nth-child(2) { --random-delay: 0.3; --random-left: 0.95; --hue: 250; } /* 深蓝 */
.rain:nth-child(3) { --random-delay: 0.5; --random-left: 0.15; --hue: 310; } /* 紫红 */
.rain:nth-child(4) { --random-delay: 0.7; --random-left: 0.85; --hue: 10;   } /* 鲜红 */
.rain:nth-child(5) { --random-delay: 0.9; --random-left: 0.35; --hue: 70;  } /* 金黄 */
.rain:nth-child(6) { --random-delay: 0.2; --random-left: 0.65; --hue: 130; } /* 翠绿 */
.rain:nth-child(7) { --random-delay: 0.4; --random-left: 0.25; --hue: 220; } /* 靛青 */
.rain:nth-child(8) { --random-delay: 0.6; --random-left: 0.75; --hue: 280; } /* 紫 */
.rain:nth-child(9) { --random-delay: 0.8; --random-left: 0.45; --hue: 40;  } /* 橙黄 */
.rain:nth-child(10) { --random-delay: 0;   --random-left: 0.55; --hue: 100; } /* 亮绿 */
.rain:nth-child(11) { --random-delay: 0.15; --random-left: 0.1; --hue: 340;} /* 玫红 */
.rain:nth-child(12) { --random-delay: 0.35; --random-left: 0.9; --hue: 160;} /* 青绿 */
.rain:nth-child(13) { --random-delay: 0.55; --random-left: 0.2; --hue: 50; }  /* 橙 */
.rain:nth-child(14) { --random-delay: 0.75; --random-left: 0.8; --hue: 230;} /* 深蓝绿 */
.rain:nth-child(15) { --random-delay: 0.95; --random-left: 0.3; --hue: 320;} /* 紫红 */
.rain:nth-child(16) { --random-delay: 0.25; --random-left: 0.7; --hue: 80; }  /* 黄绿 */
.rain:nth-child(17) { --random-delay: 0.45; --random-left: 0.4; --hue: 260;} /* 蓝紫 */
.rain:nth-child(18) { --random-delay: 0.65; --random-left: 0.6; --hue: 20;   } /* 橙红 */
.rain:nth-child(19) { --random-delay: 0.85; --random-left: 0.5; --hue: 140;} /* 浅绿 */
.rain:nth-child(20) { --random-delay: 0.05; --random-left: 0;   --hue: 290;} /* 深紫蓝 */


</style>
</head>
<body>
  <div class="container">
    <div class="center-text">码农的钱都敢欠？RNM! 还钱！</div>
    <div class="rain-container" id="rainContainer">
        <!-- 流星雨将在这里动态生成 -->
    </div>
  </div>

  <script>
    const rainContainer = document.getElementById('rainContainer');
    const rainText = "还钱"; // 流星雨的文字
    const numColumns = 20; // 列数，可以调整铺满程度
    const rainCharsPerColumn = 30; // 每列的字符数量，控制密度
    const particleCount = 100; // 粒子数量

    // 创建雨列
    for (let i = 0; i < numColumns; i++) {
        const rainColumn = document.createElement('div');
        rainColumn.classList.add('rain-column');
        rainContainer.appendChild(rainColumn);

        // 在每列中添加雨字符
        for (let j = 0; j < rainCharsPerColumn; j++) {
            const rainDrop = document.createElement('span');
            rainDrop.classList.add('rain');
            rainDrop.textContent = rainText;

            //  随机颜色和延迟 (JavaScript 动态设置)
            const randomDelay = Math.random();
            const randomLeft = Math.random();
            const hue = Math.floor(Math.random() * 360); // 随机色相

            rainDrop.style.setProperty('--random-delay', randomDelay.toFixed(2));
            rainDrop.style.setProperty('--random-left', randomLeft.toFixed(2));
            rainDrop.style.setProperty('--hue', hue);

            rainColumn.appendChild(rainDrop);
        }
    }

    // 创建粒子效果
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      rainContainer.appendChild(particle);

      // 随机粒子属性
      const particleDuration = Math.random() * 2 + 1; // 1-3秒的持续时间
      const particleDelay = Math.random() * 2; // 随机延迟
      const particleSize = Math.random() * 4 + 3; // 3-7像素大小
      const startPosition = Math.random() * 100; // 随机水平起始位置

      particle.style.setProperty('--particle-duration', particleDuration.toFixed(2));
      particle.style.setProperty('--particle-delay', particleDelay.toFixed(2));
      particle.style.width = `${particleSize}px`;
      particle.style.height = `${particleSize}px`;
      particle.style.left = `${startPosition}vw`; // 水平位置
      particle.style.top = `${Math.random() * 100}vh`; // 垂直起始位置轻微随机

      // 粒子颜色可以随机，也可以统一白色，这里先用白色
      // particle.style.background = `hsl(${Math.random() * 360}, 80%, 80%)`;
    }


  </script>
</body>
</html>

例子-2的自定义选项

修改文字: 可以修改 rainText 变量来改变流星雨的文字，例如改成 “Pay Money!” 或者其他更具个性的口号。
调整密度: 修改 numColumns 和 rainCharsPerColumn 变量来调整流星雨的列数和每列的文字数量，从而调整密度。
修改颜色: 可以修改 CSS 中关于 --hue 变量的设置，或者直接修改 hsl() 函数中的色相值，来调整流星雨的颜色。
调整速度和动画: 可以修改 CSS 中 rainFall 等动画的 animation-duration 属性来调整流星雨的速度和其他动画效果。
粒子效果: 可以调整 particleCount 变量来增减粒子数量，或者修改 CSS 中 particle 相关的样式和动画来调整粒子效果。
中心文字: 可以修改 .center-text 的内容和样式，以及 pulseText 和 hueRotateText 动画来调整中心文字的效果。

chx · February 8, 2025, 3:02am

已经是见到三个话题说这个了哈哈

hundred_flowers · February 8, 2025, 3:04am

这个瓜吃三遍了

loyar · February 8, 2025, 3:14am

弱弱问一句，这样搞犯法了吗？

sunplus · February 8, 2025, 3:16am

http不行https可以

citybaby · February 8, 2025, 3:17am

打不开咯

handsome · February 8, 2025, 3:31am

吃饱了这个瓜。。

1263403710 · February 8, 2025, 3:48am

应该是DNS解析下了。。。然后刷了缓存

1263403710 · February 8, 2025, 3:49am

这个好玩

StellaFortuna · February 8, 2025, 3:52am

不是我点赞快比楼主多了

GSQ_55 · February 8, 2025, 3:52am

总有些乐色公司

shiki · February 8, 2025, 3:54am

好像已经访问不了了，贴个archive https://web.archive.org/web/20250208023812/https://focuz-in.com/

carlin · February 8, 2025, 3:57am

惊现"还钱哥"

lovemoon51 · February 8, 2025, 4:01am

哈哈哈哈哈哈

Topic		Replies	Views
网上说的这个大厂的瓜，有没有佬友知道详情的搞七捻三吃瓜 , 职场 , 纯水	14	1116	March 11, 2025
惊天大瓜啊！搞七捻三病友 , KFC , 疯狂星期四 , 纯水	37	1025	February 27, 2025
感觉有点怪怪的搞七捻三纯水	4	156	March 19, 2025
佬们看看你们的桌面有没有我乱搞七捻三纯水	30	375	February 27, 2025
各位佬友早安呀。搞七捻三纯水	7	126	March 10, 2025

暴躁码农 在线讨薪！！！给佬友看看

Related topics

暴躁码农在线讨薪！！！给佬友看看