邪修 CSS 10 连击｜全站旋转木马、100 万阴影、性能核弹

邪修 CSS ，10 段“千万别上生产”的暗黑样式
——仅供技术猎奇，切勿真用！

⚠️ 每条都可能：布局爆炸、性能崩溃、可访问性归零、设计师原地升天

面试炫技 OK，项目敢用就等死！

1️⃣ 一行全站旋转木马

html{animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

整个页面像陀螺，用户 3 秒眩晕。

2️⃣ 负边距黑洞

.box{margin:-9999px;}

元素直接飞出可视宇宙，滚动条无限长。

3️⃣ * { all: unset !important; }

*{all:unset!important;}

一锤清零所有默认样式，浏览器回到石器时代。

4️⃣ 100 万阴影叠爆性能

.boom{
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px #000,
    0 0 0 3px #000,
    /* …重复 100 万次… */;
}

GPU 直接跪，Chrome OOM。

5️⃣ 透明滚动条

::-webkit-scrollbar{width:0;height:0;}

滚动功能还在，但肉眼找不到条，用户疯狂点。

6️⃣ 纯 CSS 死循环动画

.loop{
  animation:loop .001s steps(1) infinite;
}
@keyframes loop{from,to{background:red;}}

1 毫秒一帧，CPU 100% 占满。

7️⃣ 伪元素伪造按钮

.fake::after{
  content:"我是按钮";
  pointer-events:auto;
  cursor:pointer;
}
.fake{pointer-events:none;}

真按钮被阉割，点的是空气。

8️⃣ position:sticky 粘死屏

.stick{position:sticky;top:-100vh;}

元素永远卡在屏幕外，滚动条拉到骨折也看不见。

9️⃣ 文字不可选 + 右键禁用

body{
  user-select:none;
  -webkit-touch-callout:none;
}

复制粘贴、右键菜单全部阵亡。

🔟 filter:blur(100px) 全站马赛克

html{filter:blur(100px);}

全屏高斯模糊，用户体验直接归零。

邪修口诀

“属性当武器，动画当炸弹；

性能可弃，效果必炸。”

PS

想要正经学习 CSS ，从《CSS 入门课程》开始！