12个使人惊叹的CSS实验项目
翻译：疯狂的技术宅
原文： https://1stwebdesigner.com/12...
本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章css
你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者能够用 CSS 作些什么。html
这里有各类滤镜和特效，它们都是开源的，能够用在你本身的 web 项目中。 这些模块有的机遇 JavaScript，更多的是HTML。 这意味着它们比你指望的更轻盈。 看看这些惊人的纯CSS实验，也许你本身也能够尝试一下。前端
太阳系
哇！ 若是你喜欢太空，必定会被这个用 CSS 实现的的太阳系动画效果所震撼。 这不只仅是一个漂亮的动画; 相对于真实的地球年，每一个行星都能准确地围绕太阳旋转。git
查看演示github
项目连接：https://codepen.io/kowlor/pen...web
渐变背景动画效果
动画对于网站来讲是一个臭名昭着的问题。若是优化不佳，可能会致使速度大服务放缓。这个美丽的动画渐变效果很是轻巧，更不用说它能让你很容易的就能编辑和添加本身的颜色。微信
项目连接：https://codepen.io/P1N2O/pen/...ide
叠叠高游戏
你能够不用 JavaScript 来编写一个游戏。这个纯粹用 CSS 实现的叠叠高游戏看上去很简单，可是颇有趣，并且图形也很漂亮。虽然作出来并不容易，但这只也仅仅是让 CSS 小小的露了一手。工具
查看演示性能
项目连接：https://codepen.io/finnhvman/...
3D进度条
漂亮轻便的进度条。易于定制，很容易适应你的项目。 这些条纹使用 3D 技术制做，具备独特的液体外观。 你甚至能够将它们变成迷你 3D 图表！
项目连接：https://codepen.io/rgg/pen/Qb...
出故障的文字
故障文本看起来老是很酷。这个案例没有使用 GIF，仅用 JavaScript 或 HTML 就实现了生动的特效。 若是你想为你的网站添加小故障效果，请参考它。
项目连接：https://codepen.io/lbebber/pe...
Francine
你能够用 HTML 和 CSS 制做艺术品！ Francine 是一副18世纪风格的画做，纯粹用代码制做和展现。 然而它看起来与其余传统创做的艺术品没有任何区别。
项目连接：https://github.com/cyanharlow...
手机
与 Francine 相似，这款手机也是只用 CSS 和 HTML 创造的，可是看上去简直和真的同样！ 若是你有兴趣，可使用代码并查看如何实现。
项目连接：https://codepen.io/Wujek_Greg...
地图创做器
你觉得要用 JavaScript 来编写这东西？ 再好好想一想！ 这个可爱的 3D 地图创做器除了 CSS（还有一点点HTML）以外什么都没有。 难道这不足以使人兴奋吗？
项目连接：https://codepen.io/onediv/pen...
Instagram.css
你的网站须要一些仿 Instagram 风格的过滤器？ 这组缩小文件也附带安装教程。 如今，你能够轻松地将 Instagram 过滤器添加到任何图像中。
项目连接：https://picturepan2.github.io...
鬼影渐变效果按钮
使人惊讶的是它是只用 CSS 编写的。 凭借其漂亮的动画和渐变效果，把这个按钮用在任何网站上，看起来都会很棒。
项目地址：https://codepen.io/ARS/pen/vE...
Devices.css
若是你曾经想在本身的网站上展现手机或电脑，并在屏幕上显示你所选择的图片，请参考此项目。 这些都是以现代设备为蓝本设计的！
项目地址：https://picturepan2.github.io...
动态图像着色
这是一个很是酷的项目：用 CSS 和颜色选择工具更改图片中的颜色。
项目地址：https://codepen.io/noahblon/p...
小巧、灵敏和美丽
你在网站上看到的许多惊人的特效均可以说是 JavaScript 的功劳，遗憾的是 JS 并不老是最轻量级的解决方案。 不过你可能会对CSS的功能感到惊讶。 若是作得正确，大多数状况下它对性能的影响要小得多。
不管是哪一种方式，能够看到 CSS开发者提出的这些创意都颇有趣。这些实验项目是由一些真正的创新开发者作出的，因此请去给他们一些支持，并告诉我你以为哪一个是最酷的！
本文首发微信公众号：jingchengyideng
