与流行的看法相反, CSS不仅用于提供网页的基本样式以使其看起来更具吸引力。 CSS还可以做很多其他事情。 CSS具有HTML和Javascript的能力,可以创建动画和进行交互,从而使Web开发人员有机会尝试和尝试不同的方法。
就像网络浏览器就像一块空画布一样,他们可以在其中玩耍。 这里仅介绍人们使用CSS构建的酷炫和创造性的18个示例 。 从原始角色到有趣的动画,都有很多启发您自己使用CSS的方法。
Chris Pattle仅使用CSS创建了Simpsons家族的成员。 他将每个角色的脸庞分成较小的形状,然后将它们拼凑在一起。 他甚至使眼睛动起来,为角色注入生命。
![辛普森](https://i-blog.csdnimg.cn/blog_migrate/4590a87ee2272c8ab77e05127d340d0f.png)
如果您不能克服《小黄人》的狂热(由“ 卑鄙的我 ”电影提供),您将为此而疯狂。 Amr Zakaria使用纯CSS创建了Minions。 奴才配有眨眼和友好的波浪。
![奴才](https://i-blog.csdnimg.cn/blog_migrate/4838b40c1dc42e0a67e156638004e3ec.png)
这是一个出色的文本阴影实现示例,可通过CSS实现破碎的霓虹灯标牌效果。 将鼠标悬停在字母“ c”,“ n”和“ i”上的灯光略微变暗。
![霓虹灯](https://i-blog.csdnimg.cn/blog_migrate/3c959c62f357ddaef6bbfbcd4a9d4ad8.png)
这是一块简单的奶酪,是吗? Hugo Giraduel使用CSS创建了这个3D奶酪块。 我不认识你,但它看起来也像某种家居用品。
![起司](https://i-blog.csdnimg.cn/blog_migrate/8a77ff971e6fa20ed1f5d94428d8b69c.png)
Hugo Giraudel的另一作品。 这次,他仅使用一个元素创建了一个8位字符。
![砖字](https://i-blog.csdnimg.cn/blog_migrate/2f75dc3326c72c5e215909b50ca1eea6.png)
调整浏览器窗口的大小,猫的身体将随着浏览器窗口的宽度而相应地拉伸或压缩。 您认为可以拉伸或挤压CSS-kitty多远?
![长猫](https://i-blog.csdnimg.cn/blog_migrate/8d2d54c2c9a5c861d255284211797921.png)
这是另一个有趣的地方。 缓慢向右滚动时,好像在旋转或旋转可乐罐。 纯粹用CSS就能实现的令人敬畏的效果。
![可乐瓶css](https://i-blog.csdnimg.cn/blog_migrate/13acc4d16fe702ad4ebd29acdd87b372.png)
该计算器的设计简洁明了,但与Javascript结合使用时,它为您提供了一种更有趣,更易上手的方法,可以进一步进行计算。
![计算器](https://i-blog.csdnimg.cn/blog_migrate/7bd2907ad9b5eb0ad6ba98ce0f7ee475.png)
丹·伊登 ( Dan Eden )制作的此切换按钮的灵感来自iOS7图标。 如果您亲自尝试,您将可以看到它与原始的iOS7切换按钮有何相似之处。
![iOS版](https://i-blog.csdnimg.cn/blog_migrate/4a0d1b13e8c707999c1b53b1a65318c9.png)
这是另一个可爱的奴才,以CSS绘制的绘图样式完成。
![奴才](https://i-blog.csdnimg.cn/blog_migrate/bd50e9c7c059bae9697d35f2e3ded732.png)
看一下动画的演示,您将看到菜单形状平滑过渡到另一个形状。
![菜单切换svg](https://i-blog.csdnimg.cn/blog_migrate/01f3d54f2a988962b06db1a6cd1099c5.png)
您是否相信这辆闪亮的特斯拉卡车仅由一个div
元素制成? 更不用说它在照明和前灯方面也有很多细节。 令人印象深刻。
![特斯拉卡车在深色背景上](https://i-blog.csdnimg.cn/blog_migrate/364dc63834e8bd0bc0e51728ff8ba993.png)
动画的雪落。 用200百个div
和CSS动画制作。 在冬季或圣诞节期间,它可能是您网站的理想背景。
![晚上下雪](https://i-blog.csdnimg.cn/blog_migrate/922d651e888c1bfa55ebfd1c84aa33fe.png)
一张完全由HTML和CSS制成的扑克牌,甚至包括King's衬衫和身体等细节。
![国王卡](https://i-blog.csdnimg.cn/blog_migrate/01eaaa740d82d7592545bebb0773d45a.png)
带有心脏形状的开关UI。 您可能会用它来使您的网站或应用看起来更非常规。
![用粉红色的心形切换UI](https://i-blog.csdnimg.cn/blog_migrate/64205f38c1aa215136faca0e03507677.png)
有什么比圣诞树更好的呢? 完全由CSS动画制作的摆动圣诞树。 圣诞节期间,您网站的完美装饰。
![摇摆的圣诞树](https://i-blog.csdnimg.cn/blog_migrate/02214f7c9067dfca10fc791b5464ffcd.png)
如果您不喜欢特斯拉卡车,那么这款经典的大众露营车会怎么样?
![露营者货车,粉红色](https://i-blog.csdnimg.cn/blog_migrate/b4ebba3d9ac51efb40dbcd86d78228dd.png)
借助Pug模板,SCSS,精确度计算,我们可以使这个正方形旋流。
![方形漩涡](https://i-blog.csdnimg.cn/blog_migrate/d3cb4935af76bc400ac9dc185039cf65.png)
仅使用CSS,我们现在还可以在文本中添加阴影。 不仅如此,还可以使它像下面这样更加生动。
![多个文字阴影](https://i-blog.csdnimg.cn/blog_migrate/d7786549de779c090a1c4b495140ed18.png)
同样,它并不是完全用HTML和CSS制成的-时钟指针用JavaScript来移动-这款奇特的Lorex手表细节令人着迷。 这很有价值。
![劳力士手表](https://i-blog.csdnimg.cn/blog_migrate/45d9ba8258826dac8f270b496628558d.png)