12个令人难以置信的CSS实验项目

迷南。 2022-03-21 12:42 185阅读 0赞

> 翻译：疯狂的技术宅  
> 原文：[https://1stwebdesigner.com/12-incredible-pure-css-experiments/][https_1stwebdesigner.com_12-incredible-pure-css-experiments]

你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可以用 CSS 做些什么。

这里有各种滤镜和特效，它们都是开源的，可以用在你自己的 web 项目中。 这些模块有的机遇 JavaScript，更多的是HTML。 这意味着它们比你期望的更轻盈。 看看这些惊人的纯CSS实验，也许你自己也可以尝试一下。

### 太阳系 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]

哇！ 如果你喜欢太空，一定会被这个用 CSS 实现的的太阳系动画效果所震撼。 这不仅仅是一个漂亮的动画; 相对于真实的地球年，每个行星都能准确地围绕太阳旋转。

[查看演示][Link 1]

项目链接：[https://codepen.io/kowlor/pen/ZYYQoy][https_codepen.io_kowlor_pen_ZYYQoy]

### 渐变背景动画效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]

动画对于网站来说是一个臭名昭着的问题。如果优化不佳，可能会导致速度大服务放缓。这个美丽的动画[渐变效果][Link 2]非常轻巧，更不用说它能让你很容易的就能编辑和添加自己的颜色。

项目链接：[https://codepen.io/P1N2O/pen/pyBNzX][https_codepen.io_P1N2O_pen_pyBNzX]

### 叠叠高游戏 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]

你可以不用 JavaScript 来编写一个游戏。这个纯粹用 CSS 实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。虽然做出来并不容易，但这只也仅仅是让 CSS 小小的露了一手。

[查看演示][Link 3]

项目链接：[https://codepen.io/finnhvman/pen/xJRMJp][https_codepen.io_finnhvman_pen_xJRMJp]

### 3D进度条 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]

漂亮轻便的进度条。易于定制，很容易适应你的项目。 这些条纹使用 3D 技术制作，具有独特的液体外观。 你甚至可以将它们变成迷你 3D 图表！

[查看演示][Link 4]

项目链接：[https://codepen.io/rgg/pen/QbRyOq][https_codepen.io_rgg_pen_QbRyOq]

### 出故障的文字 ###

![在这里插入图片描述][20190201174647481.png]

故障文本看起来总是很酷。这个案例没有使用 GIF，仅用 JavaScript 或 HTML 就实现了生动的特效。 如果你想为你的网站添加小故障效果，请参考它。

[查看演示][Link 5]

项目链接：[https://codepen.io/lbebber/pen/ypgql][https_codepen.io_lbebber_pen_ypgql]

### Francine ###

![Francine][]

你可以用 HTML 和 CSS 制作艺术品！ Francine 是一副18世纪风格的画作，纯粹用代码制作和展示。 然而它看起来与其他传统创作的艺术品没有任何区别。

项目链接：[https://github.com/cyanharlow/purecss-francine][https_github.com_cyanharlow_purecss-francine]

### 手机 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]

与 Francine 类似，这款手机也是只用 CSS 和 HTML 创造的，但是看上去简直和真的一样！ 如果你有兴趣，可以使用代码并查看如何实现。

[查看演示][Link 6]

项目链接：[https://codepen.io/Wujek\_Greg/pen/LmrweG][https_codepen.io_Wujek_Greg_pen_LmrweG]

### [地图创作器][Link 7] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 5]

你以为要用 JavaScript 来编写这东西？ 再好好想想！ 这个可爱的 3D 地图创作器除了 CSS（还有一点点HTML）之外什么都没有。 难道这不足以令人兴奋吗？

[查看演示][Link 8]

项目链接：[https://codepen.io/onediv/pen/NrNebj][Link 7]

### [Instagram.css][] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 6]

你的网站需要一些仿 Instagram 风格的过滤器？ 这组缩小文件也附带安装教程。 现在，你可以轻松地将 Instagram 过滤器添加到任何图像中。

项目链接：[https://picturepan2.github.io/instagram.css/][Instagram.css]

### 鬼影渐变效果按钮 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 7]

令人惊讶的是它是只用 CSS 编写的。 凭借其漂亮的动画和渐变效果，把这个按钮用在任何网站上，看起来都会很棒。

[查看演示][Link 9]

项目地址：[https://codepen.io/ARS/pen/vEwEPP][https_codepen.io_ARS_pen_vEwEPP]

### [Devices.css][] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 8]

如果你曾经想在自己的网站上展示手机或电脑，并在屏幕上显示你所选择的图片，请参考此项目。 这些都是以现代设备为蓝本设计的！

项目地址：[https://picturepan2.github.io/devices.css/][Devices.css]

### 动态图像着色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 9]

这是一个非常酷的项目：用 CSS 和颜色选择工具更改图片中的颜色。

[演示效果][Link 10]

项目地址：[https://codepen.io/noahblon/pen/ZbjmbK][https_codepen.io_noahblon_pen_ZbjmbK]

### 小巧、灵敏和美丽 ###

你在网站上看到的许多惊人的特效都可以说是 JavaScript 的功劳，遗憾的是 JS 并不总是最轻量级的解决方案。 不过你可能会对CSS的功能感到惊讶。 如果做得正确，大多数情况下它对性能的影响要小得多。

无论是哪种方式，可以看到 CSS开发者提出的这些创意都很有趣。这些实验项目是由一些真正的创新开发者做出的，所以请去给他们一些支持，并告诉我你觉得哪个是最酷的！

--------------------

欢迎扫描二维码关注公众号，每天第一时间推送我翻译的国外最新技术文章。

![SouthEast][]

[https_1stwebdesigner.com_12-incredible-pure-css-experiments]: https://1stwebdesigner.com/12-incredible-pure-css-experiments/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]: /images/20220321/4516da2cc024445ca714cf9ccf27a75a.png
[Link 1]: https://codepen.io/kowlor/embed/preview/ZYYQoy?height=450&theme-id=0&slug-hash=ZYYQoy&default-tab=css%2Cresult&user=kowlor&pen-title=Solar%20System%20animation%20-%20Pure%20CSS&preview=true&name=cp_embed_1
[https_codepen.io_kowlor_pen_ZYYQoy]: https://codepen.io/kowlor/pen/ZYYQoy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]: /images/20220321/8e3a839df0ca4cb8b10d7ba749a2e0dc.png
[Link 2]: https://1stwebdesigner.com/css-gradients/
[https_codepen.io_P1N2O_pen_pyBNzX]: https://codepen.io/P1N2O/pen/pyBNzX
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]: /images/20220321/ae9615f9f1c149acb9c4ba0adb91dcd6.png
[Link 3]: https://codepen.io/finnhvman/embed/preview/xJRMJp?height=450&theme-id=0&slug-hash=xJRMJp&default-tab=html%2Cresult&user=finnhvman&pen-title=Pure%20CSS%20Stack&preview=true&name=cp_embed_3
[https_codepen.io_finnhvman_pen_xJRMJp]: https://codepen.io/finnhvman/pen/xJRMJp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]: /images/20220321/c65966dd36984ac99bddce00e6d1e2d6.png
[Link 4]: https://codepen.io/rgg/embed/preview/QbRyOq?height=450&theme-id=0&slug-hash=QbRyOq&default-tab=css%2Cresult&user=rgg&pen-title=Pure%20CSS%20Progress&preview=true&name=cp_embed_4
[https_codepen.io_rgg_pen_QbRyOq]: https://codepen.io/rgg/pen/QbRyOq
[20190201174647481.png]: /images/20220321/0485c7bc1c4a414489ff14dceb8b4e2e.png
[Link 5]: https://codepen.io/lbebber/embed/preview/ypgql?height=450&theme-id=0&slug-hash=ypgql&default-tab=css%2Cresult&user=lbebber&pen-title=CSS%20Glitched%20Text&preview=true&name=cp_embed_5
[https_codepen.io_lbebber_pen_ypgql]: https://codepen.io/lbebber/pen/ypgql
[Francine]: https://1stwebdesigner.com/wp-content/uploads/2019/01/css-experiments-francine.jpg
[https_github.com_cyanharlow_purecss-francine]: https://github.com/cyanharlow/purecss-francine
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]: /images/20220321/06c9fc7e3d074d96b473bc714bbafeb1.png
[Link 6]: https://codepen.io/Wujek_Greg/embed/LmrweG?height=450&theme-id=0&slug-hash=LmrweG&default-tab=css%2Cresult&user=Wujek_Greg&pen-title=Photorealistic%20pure%20CSS%20mobile%20phone&preview=true&name=cp_embed_6
[https_codepen.io_Wujek_Greg_pen_LmrweG]: https://codepen.io/Wujek_Greg/pen/LmrweG
[Link 7]: https://codepen.io/onediv/pen/NrNebj
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 5]: /images/20220321/76c3416f1d5345598c63eb94b7620e05.png
[Link 8]: https://codepen.io/onediv/embed/preview/NrNebj?height=450&theme-id=0&slug-hash=NrNebj&default-tab=css%2Cresult&user=onediv&pen-title=Full%20CSS%20Map%20creator&preview=true&name=cp_embed_7
[Instagram.css]: https://picturepan2.github.io/instagram.css/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 6]: /images/20220321/e4fd2bc9732843e8a856ba37f64b1ccd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 7]: /images/20220321/0f92d80b9ab14628ac9f8b152369a6e7.png
[Link 9]: https://codepen.io/ARS/embed/preview/vEwEPP?height=450&theme-id=0&slug-hash=vEwEPP&default-tab=css%2Cresult&user=ARS&pen-title=Animated%20Gradient%20Ghost%20Button%20Concept&preview=true&name=cp_embed_8
[https_codepen.io_ARS_pen_vEwEPP]: https://codepen.io/ARS/pen/vEwEPP
[Devices.css]: https://picturepan2.github.io/devices.css/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 8]: /images/20220321/db96fbaa72ca473fb5044b3cbc4a6492.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 9]: /images/20220321/f7b76195bfeb42728be20180039bc6fc.png
[Link 10]: https://codepen.io/noahblon/embed/preview/ZbjmbK?height=450&theme-id=0&slug-hash=ZbjmbK&default-tab=css%2Cresult&user=noahblon&pen-title=Dynamic%20Image%20Colorizing%20with%20input%20type%3Dcolor&preview=true&name=cp_embed_9
[https_codepen.io_noahblon_pen_ZbjmbK]: https://codepen.io/noahblon/pen/ZbjmbK
[SouthEast]: /images/20220321/99fd6a60f1754c538fe198b683de9d65.png