天天看点

18 个你可能不相信是用 CSS 制作出来的东西

18 个你可能不相信是用 CSS 制作出来的东西

与流行的看法相反,css不仅仅是用来提供一个web页面的基本风格,以使它看起来更有吸引力。还有很多其他的事情,css也可以做的很好。由于它创建动画和交互的能力,css集合html以及javascript给web开发者提供了尝试不同方法的机会。

浏览器就像一个空的画布,web开发者可以在这里尽情的发挥。下面是18个人们用css创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在css上。

18 个你可能不相信是用 CSS 制作出来的东西

如果你看过电影《despicable me(神偷奶爸)》,那你一定对其中的minion(小黄人)印象深刻。amr zakaria用纯css实现了其中的几个minion,它们会用闪烁的眼睛和友好的手势给你打招呼。

18 个你可能不相信是用 CSS 制作出来的东西

这是用css的 text-shadow 实现破碎的霓虹灯效果的例子。把鼠标放到单词上,注意字母“c”、“n”和“i”的变化。

18 个你可能不相信是用 CSS 制作出来的东西

这是一块奶酪还是?hugo giraduel用css制作了这个3d的奶酪。我不知道你怎么认为,但是它看起来就像某种家居用品。

18 个你可能不相信是用 CSS 制作出来的东西

hugo giraudel的另一个作品,这次,他只用一个元素实现了8位字符。

18 个你可能不相信是用 CSS 制作出来的东西
18 个你可能不相信是用 CSS 制作出来的东西

这是一个独特的透明颜色滑块菜单,当鼠标滑过的时候会有一个菜单图标。

18 个你可能不相信是用 CSS 制作出来的东西

css creatures是由@bennettfeely制作的可以微笑、哭或者你想表达的其他表情。你可以选择牙齿、胡须、颜色、眼睛以及嘴巴来创建你自己。

18 个你可能不相信是用 CSS 制作出来的东西

调整您的浏览器窗口,猫的身体会根据浏览器窗口的宽度来拉伸或压缩。你觉得这个css-kitty拉伸或者压缩的的程度是多大呢?

18 个你可能不相信是用 CSS 制作出来的东西

这是另一个非常有趣的。当你向右滑动滚动条的时候,看起来就像是可乐罐在滚动一样。一个纯css实现的很棒的效果。

18 个你可能不相信是用 CSS 制作出来的东西

这个计算器的设计简单干净,但是如果结合javascript,它会给你带来更多的乐趣。

18 个你可能不相信是用 CSS 制作出来的东西

应用任何动画效果是很困难的,更不用说是通过纯css。但是这个网格动画效果实现的很漂亮。

18 个你可能不相信是用 CSS 制作出来的东西
18 个你可能不相信是用 CSS 制作出来的东西
18 个你可能不相信是用 CSS 制作出来的东西

这是另一个由css实现的可爱风格的minion 。

18 个你可能不相信是用 CSS 制作出来的东西

看动画的演示,您将看到菜单形状的平稳过渡到另一个形状。

18 个你可能不相信是用 CSS 制作出来的东西
18 个你可能不相信是用 CSS 制作出来的东西

这些是用纯css实现的加载样式。如果你想减小带宽的使用,基于css的加载样式将会非常的好用。

18 个你可能不相信是用 CSS 制作出来的东西

继续阅读