我创建了 100 多个独特的 CSS 模式 | 最佳合集 🤩

继CSS 加载器和CSS 下划线/叠加动画之后，我又带着另一个大合集回来了。这次的主题是 CSS 模式。

👉 CSS 模式👈

我从头开始编写了 100 多个独特的 CSS 模式（是的，这花了我很多时间）。

所有模式都具有相同的代码结构：

html {
  --s: 50px; /* control the size */
  --c1: red;
  --c2: blue;
  /* more colors if needed */

  /* A lot of gradients and strange numbers*/

}

你只需要一个变量来控制大小，并且每种颜色在代码中只定义一次。你只需点击一下即可复制/粘贴代码并调整一些变量。

抓住一个漂亮的图案并在你最喜欢的网站上向我展示结果👇

我不会在本文中列出所有 CSS 模式，但以下是我推荐的前 10 个

最好的

我非常喜欢这个。只用了两个渐变，效果就很令人满意，尤其是那个小阴影。

不可能

这个有15个渐变！我以为这是不可能的，但经过大量的数学计算和头痛之后，我做到了。

事故

我本来想创建一个特定的图案，结果计算错了，最后却得到了一个更好的图案。真是个意外的惊喜！

六边形

每个人都喜欢六边形，所以我必须有一个进入前十名

3D

我做了一些 3D 图案，但这个真的很酷

视觉错觉

这些线是直的吗？别相信你的大脑！

挑战

这道题用了很多几何技巧。这是一个很好的挑战。

波浪

如果你不喜欢六边形，那你一定喜欢波浪形。

完美

我在CSS Tip上使用了这个，结果很完美。

圣诞节

如果你不知道圣诞节送什么礼物

你呢？告诉我你最喜欢的一个👇

您还可以为喜欢的 CSS 样式生成链接，并与大家分享。非常简单！

检查模式的代码，获取其 ID 并获取唯一链接以进行分享！

我最喜欢的是“g48”👉https ://css-pattern.com/#g48

如果您想了解一些基本模式，这里有我写的两篇适合初学者的文章：

通过构建背景图案学习 CSS 径向渐变

如何使用 CSS 和圆锥渐变创建背景图案

我以后会写更多文章。我会揭秘所有复杂 CSS 模式的奥秘，敬请期待👀

该系列在未来将继续增长，所以不要忘记收藏该网站：https://css-pattern.com

所有代码都在Github中，所以点击 ⭐ Star 让我们让这个项目流行起来。

或者