28 个尖端 CSS3 效果，让您的网站现代化

我们可以使用 CSS 做很多事情，例如创建漂亮的效果、制作模型、构建不同的形状等。如今，在您的应用程序中添加完美的 CSS 并不难。互联网上有数以千计的效果和教程，而且都是免费的。选择理想效果的正确组合确实是一项艰巨的任务，而且其中大多数看起来有点过时或过时。我们收集了一些令人惊叹的 CSS3 效果  这将帮助您为您的网站提供现代外观和出色的用户体验。 您可以自由地使用代码来生成一些很棒的结果。

28。 3D 文本

使用炫酷的字体和令人惊叹的阴影效果为您的标题文本提供 3D 外观。

27。平面图标

纯 CSS Iconex 平面图标集（4 个图标），由 Alireza Attari 设计。

26。色谱

这就是通过将颜色与盒子阴影混合得到的结果。色谱是 3 种颜色之间的级数。

25。地铁用户界面

Metro UI 的灵感来自 Windows 8 设计，完全使用 CSS3 创建。图标是从 FontAwesome 中提取的。

24。弹性行程

这是文本的弹性笔触，具有漂亮的配色方案，效果是用 CSS 和 SVG 制作的。

阅读：50 多个精美的版式示例为您提供灵感

23。分层形状

美丽的彩色加上分层形状（完全用 CSS 编写），由 Snhasani 设计。

22。螺旋CSS

可用作加载图标的多云螺旋 CSS 动画。

21。文本动画

Yoann 用文本动画创建了这个令人惊叹的股票效果。第二个单词的切换效果看起来很酷。

20。扁长阴影

这是终极阴影混合，包含淡入淡出变量、长阴影和角度变量。

19。 CSS 生物

美丽的交互式图标完全由 HTML 和 CSS 制作。

18。 3d 翻转按钮

一个简单的 CSS3 3d 翻转按钮，不使用 JavaScript 和图像。

17。用阴影变换文本

这是 CSS 文本阴影，使用 lettering.js 采用高级排版技术设计。

16。 CSS 彩虹

这是带有简单悬停效果的全圆彩虹。

15。多彩故障404

使用 CSS 和一些 JavaScript 制作的令人惊叹的故障（加上振动）效果。

阅读：100+ 个创意又有趣的 404 错误页面

14。用户界面反馈

这是对您的按钮的一堆反馈想法。 这只是给你的前端 UI 带来更多活力的灵感。

13。水平手风琴

用纯 CSS 制作的水平手风琴。 它包括社交网络图标的元素（而不是图像）和通用字体。

12。圆形错觉

由 Jaime Caballero 设计的带有 Tusi 运动的圆形错觉。您可以将其用作页面加载栏/图标。

11。秒计数器

优雅的计数器，非常适合“即将推出”模板。

阅读：40 多个美丽的正在建设中和即将推出的模板

10。 CSS 文本-FX

它是通过向文本添加暗光来创建的，为您提供斑驳的闪光。

9。 CSS 菜单

具有 CSS3 动画和过渡效果的现代移动菜单。

8。预算滑块

简单的 CSS + jQuery 滑块采用 3D 设计，灵感来自 Erik Deiner。

7。动画文本阴影

此动画文本阴影图案使用 -webkit-background-clip:text 和 Linear-gradient 来模拟条纹文本阴影。

6。 CSS 3D 带标题的多米诺骨牌图像

这是响应式 3D 悬停效果，具有更好的语义标记、更少的伪元素和 CSS。

5。无线电点击

一个简单的图像滑块，使用单选按钮，完全用 CSS 编写。

4。渐变幽灵按钮

利用边框图像和框阴影设计的渐变幽灵按钮和文本。

3。柔软的切换按钮

模拟柔软的橡胶按钮，由 Justin Windle 设计。

推荐：网页设计师的新鲜资源

2。简单的堆栈效果

一组切换效果，展示如何使用透视和 3D 变换创建简单的堆叠效果。

1。 SpinKit

SpinKit（加载指示器的集合）使用 CSS 动画来创建流畅且可自定义的动画。

现在阅读：26 个现代 jQuery 插件，让您的网站变得更好