HTML5教程及源码
HTML5教程
HTML5源码
HTML5/CSS3仿Facebook登录表单利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如 CSS3密码强度验证表单 可以显示密码的强度，这款 纯CSS3发光登录表单 更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。
HTML5/CSS3超酷进度条 不同进度多种颜色这是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CSS3进度条更加鲜亮起来。
CSS3 3D发光切换按钮 模拟效果很逼真刚刚我们发布过一款 CSS3开关切换滑动按钮 ，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。
CSS3/SVG质感背景小图标 镂空效果图标按钮之前我们分享过很多利用CSS3制作的图标小按钮，比如一些分享按钮，如 纯CSS3社会化分享按钮 ，还有一些带小图标的CSS3菜单，如 HTML5/CSS3滑块动画菜单 图标动画很酷 。今天我们来分享一款用CSS3和SVG实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。
纯CSS3实现美国金门大桥 霸气十足金门大桥位于美国加利福尼亚州旧金山，看起来这座大桥非常宏伟大气。今天我们要用纯CSS3来绘制金门大桥，线条的勾勒非常逼真，个人认为除了颜色没有照片真实外，大桥的外形已经非常接近真实的金门大桥，CSS3真实霸气啊。
HTML5/CSS3弹出提示框 内置功能按钮之前我们分享过一款很不错的自定义提示框插件 CSS3带图标提示插件 多主题颜色，今天我们再分享一款多功能的HTML5/CSS3弹出提示框。和上一款提示框一样，带有小图标，而且可以关闭提示框。不同的是，这款CSS3提示框功能更加完善，可以内置一些功能按钮，比如“确定”和“取消”。
HTML5线性图表 图表数据区域可着色利用HTML5制作图表插件也比较常见，我们也收集过几款很实用的 HTML5图表插件，它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件，这款线性图表可以在不同的数据区域内绘制不同的颜色，让每一个数据区域都非常明显可见。
HTML5柱状图表 可合并多张图表的数据之前我们分享过好几款不错的HTML5柱状图表了，像这款 HTML5/CSS3水平柱状图表 ，非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表，这款图表插件可以将多张图表的数据合并成一张图表显示，在图表数据合并过程中产生融入的动画，挺不错的。
HTML5/CSS3图片分割遮罩滑块动画之前我们推荐过一款 HTML5/CSS3原图对比查看特效 HTML5图片特效 ，效果非常酷。今天我们再来分享一款类似的HTML5应用，图片上有另外一张图片作为遮罩，滑动鼠标即可移动遮罩，将部分原图显示出来，效果没有上一款好，不过参考学习可以。
以上就是10款优雅动人的HTML5教程及源码，欢迎收藏分享。