12个使人惊叹的CSS实验项目

前言

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

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

太阳系

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

渐变背景动画效果

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

叠叠高游戏

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

3D进度条

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

出故障的文字

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

Francine

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

手机

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

地图创做器

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

Instagram.css

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

鬼影渐变效果按钮

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

Devices.css

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

动态图像着色

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

交流

以为文章能够的朋友欢迎点赞收藏转发文章~在学习web前端的过程当中，每每由于没有资料或者没人指导从而致使本身不想学，所以我特地准备了个群，配套资料能够找管理小姐姐领取！不论是学习到哪一个阶段的小伙伴均可以获取到本身相对应的资料，点赞收藏转发进群的朋友有机会获取实体web前端学习书籍，感谢支持！！！