最美H5 酷站欣赏 UI素材 专题 设计导航

10 个华丽的 CSS3 设计教程

网页设计师们普遍认为在网站设计方面,CSS3拥有令人难以置信的潜力,但目前过多的限制导致它还未被广泛应用。

这篇文章介绍了10个CSS3设计教程,帮助你熟练运用CSS3的一些新增功能。由于浏览器对CSS3的支持问题,部分教程的效果仅支持在Chrome、Safari、Firefox等现代浏览器上查看。

1. 个人技能动画演示

本教程教你使用CSS3来打造动画形式的个人技能说明,颜色和字体可按个人喜好设置。

源码?/?演示

2. 反向动画

用CSS3/jQuery创建反向动画的教程(支持Firefox、Safari和Chrome)。

源码?/?演示

3. 碳纤维风格登录表单

使用渐进增强来设计表单,即使没有JavaScript和CSS的支持,该表单也能正常使用。该表单还使用了AJAX和jQuery来实现输入验证。

源码?/?演示

4. BounceBox 通知插件

该教程实现的是弹出效果,你可以添加CSS规则来设置弹出框的位置,也可以通过CSS代码来设计弹出框的样式。

源码?/?演示

5.气泡动画按钮

有了这个按钮包,再借助CSS3,你只需指定一个类名,就可以将网站上的任何链接变为气泡按钮。有四种颜色主题和三种尺寸可选。

源码?/?演示

6. 下拉选择框

用CSS3和jQuery建立一个功能齐全且美观的下拉选择框。

源码?/?演示

7. 关于页面

在本教程中,我们将使用PHP、HTML5和CSS3创建一个简单的关于页面,该页面会向用户呈现你的联系方式,还有一个下载电子名片的选项。

源码?/?演示

8. 有趣的CSS3效果:旋转的报纸

这个经典的效果可用CSS3来实现,Firefox、Chrome和Safari均支持这个效果。

源码?/?演示

9. 闪亮的旋钮控件

在本教程中,我们将用jQuery插件创建一个闪亮的旋钮控件——KnobKnob,这个插件使用CSS3转换和jQuery新的事件处理方法来和用户进行交互——点击按钮然后旋转可以调节显示效果。

源码?/?演示

10. 气泡式的工具提示

这个教程教你使用CSS3创建气泡式的工具提示。

源码?/?演示