分享10款优雅动人的HTML5教程及源码

傷城~ 2022-05-26 09:15 421阅读 0赞

今天我们要来分享10款优雅动人的HTML5教程及源码，这些HTML5教程都是我们这几天收集过来的，经过我们的挑选，希望能给大家带来帮助。

## 1、HTML5/CSS3超酷进度条 不同进度多种颜色 ##

这是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CSS3进度条更加鲜亮起来。

[![css3-progress-bar-line][]][css3-progress-bar-line 1]

[在线演示][css3-progress-bar-line 1] / [源码下载][Link 1]

## 2、CSS3 3D发光切换按钮 模拟效果很逼真 ##

刚刚我们发布过一款[CSS3开关切换滑动按钮][CSS3]，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

[![css3-shine-switch-button][]][css3-shine-switch-button 1]

[在线演示][css3-shine-switch-button 1] / [源码下载][Link 2]

## 3、CSS3/SVG质感背景小图标 镂空效果图标按钮 ##

之前我们分享过很多利用CSS3制作的图标小按钮，比如一些分享按钮，如[纯CSS3社会化分享按钮][CSS3 1]，还有一些带小图标的CSS3菜单，如[HTML5/CSS3滑块动画菜单 图标动画很酷][HTML5_CSS3_]。今天我们来分享一款用CSS3和SVG实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。

[![svg-icons-with-patterns][]][svg-icons-with-patterns 1]

[在线演示][svg-icons-with-patterns 1] / [源码下载][Link 3]

## 4、纯CSS3实现美国金门大桥 霸气十足 ##

金门大桥位于美国加利福尼亚州旧金山，看起来这座大桥非常宏伟大气。今天我们要用纯CSS3来绘制金门大桥，线条的勾勒非常逼真，个人认为除了颜色没有照片真实外，大桥的外形已经非常接近真实的金门大桥，CSS3真实霸气啊。

[![pure-css3-bridge][]][pure-css3-bridge 1]

[在线演示][pure-css3-bridge 1] / [源码下载][Link 4]

## 5、HTML5/CSS3弹出提示框 内置功能按钮 ##

之前我们分享过一款很不错的自定义提示框插件[CSS3带图标提示插件 多主题颜色][CSS3_]，今天我们再分享一款多功能的HTML5/CSS3弹出提示框。和上一款提示框一样，带有小图标，而且可以关闭提示框。不同的是，这款CSS3提示框功能更加完善，可以内置一些功能按钮，比如“确定”和“取消”。

[![html5-css3-notification][]][html5-css3-notification 1]

[在线演示][html5-css3-notification 1] / [源码下载][Link 5]

## 6、HTML5线性图表 图表数据区域可着色 ##

利用HTML5制作图表插件也比较常见，我们也收集过几款很实用的[HTML5图表插件][HTML5]，它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件，这款线性图表可以在不同的数据区域内绘制不同的颜色，让每一个数据区域都非常明显可见。

[![html5-line-chart][]][html5-line-chart 1]

[在线演示][html5-line-chart 1] / [源码下载][Link 6]

## 7、HTML5柱状图表 可合并多张图表的数据 ##

之前我们分享过好几款不错的HTML5柱状图表了，像这款[HTML5/CSS3水平柱状图表][HTML5_CSS3]，非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表，这款图表插件可以将多张图表的数据合并成一张图表显示，在图表数据合并过程中产生融入的动画，挺不错的。

[![html5-bar-chart-d3][]][html5-bar-chart-d3 1]

[在线演示][html5-bar-chart-d3 1] / [源码下载][Link 7]

## 8、HTML5/CSS3提示框Tooltip动画 ##

之前我们已经分享过一款[HTML5/CSS3分步提示框Tooltip ][HTML5_CSS3_Tooltip]，不过这款提示框主要是用来分步操作提示的，不是真正的Tooltip。今天我们要分享一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时，就会在按钮正上方弹出一个Tooltip提示框，并且伴有淡入淡出的效果。

[![css3-icon-tooltip][]][css3-icon-tooltip 1]

[在线演示][css3-icon-tooltip 1] / [源码下载][Link 8]

## 9、HTML5/CSS3图片分割遮罩滑块动画 ##

之前我们推荐过一款[HTML5/CSS3原图对比查看特效 HTML5图片特效][HTML5_CSS3_ HTML5]，效果非常酷。今天我们再来分享一款类似的HTML5应用，图片上有另外一张图片作为遮罩，滑动鼠标即可移动遮罩，将部分原图显示出来，效果没有上一款好，不过参考学习可以。

[![html5-css3-image-slider-divide][]][html5-css3-image-slider-divide 1]

[在线演示][html5-css3-image-slider-divide 1] / [源码下载][Link 9]

以上就是10款优雅动人的HTML5教程及源码，欢迎收藏分享。

[css3-progress-bar-line]: /images/20220526/a1cad6aaf5894e36be2ae9f18e313efb.png
[css3-progress-bar-line 1]: http://www.html5tricks.com/demo/css3-progress-bar-line/index.html
[Link 1]: http://www.html5tricks.com/css3-progress-bar-line.html
[CSS3]: http://www.html5tricks.com/css3-switch-light-button.html
[css3-shine-switch-button]: /images/20220526/03712ceda5cd47e5b870d19147b2a4aa.png
[css3-shine-switch-button 1]: http://www.html5tricks.com/demo/css3-shine-switch-button/index.html
[Link 2]: http://www.html5tricks.com/css3-3d%E5%8F%91%E5%85%89%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE-%E6%A8%A1%E6%8B%9F%E6%95%88%E6%9E%9C%E5%BE%88%E9%80%BC%E7%9C%9F.html
[CSS3 1]: http://www.html5tricks.com/css3-social-button-in-top.html
[HTML5_CSS3_]: http://www.html5tricks.com/html5-css3-fluid-menu-with-icon.html
[svg-icons-with-patterns]: /images/20220526/2e89a89db0f148729774874560b884bf.png
[svg-icons-with-patterns 1]: http://www.html5tricks.com/demo/svg-icons-with-patterns/index.html
[Link 3]: http://www.html5tricks.com/svg-icons-with-patterns.html
[pure-css3-bridge]: /images/20220526/1a765d062e584527be78696f628471ee.png
[pure-css3-bridge 1]: http://www.html5tricks.com/demo/pure-css3-bridge/index.html
[Link 4]: http://www.html5tricks.com/pure-css3-bridge.html
[CSS3_]: http://www.html5tricks.com/css3-notification.html
[html5-css3-notification]: /images/20220526/c6ac8fe802f34d0faf40fe4848d62922.png
[html5-css3-notification 1]: http://www.html5tricks.com/demo/html5-css3-notification/index.html
[Link 5]: http://www.html5tricks.com/html5-css3-notification.html
[HTML5]: http://www.html5tricks.com/tag/html5%E5%9B%BE%E8%A1%A8
[html5-line-chart]: /images/20220526/8d555a9b992c4b01b36702f359a524e4.png
[html5-line-chart 1]: http://www.html5tricks.com/demo/html5-line-chart/index.html
[Link 6]: http://www.html5tricks.com/html5-line-chart-color-area.html
[HTML5_CSS3]: http://www.html5tricks.com/html5-css3-bar-chart.html
[html5-bar-chart-d3]: /images/20220526/f460122c545c4d48b1b3fd11f85b9fdb.png
[html5-bar-chart-d3 1]: http://www.html5tricks.com/demo/html5-bar-chart-d3/index.html
[Link 7]: http://www.html5tricks.com/html5-bar-chart-d3.html
[HTML5_CSS3_Tooltip]: http://www.html5tricks.com/html5-guide-tooltip.html
[css3-icon-tooltip]: /images/20220526/b268fd295e004b18a7ac2db4b111a180.png
[css3-icon-tooltip 1]: http://www.html5tricks.com/demo/css3-icon-tooltip/index.html
[Link 8]: http://www.html5tricks.com/css3-icon-tooltip.html
[HTML5_CSS3_ HTML5]: http://www.html5tricks.com/html5-css3-image-compare.html
[html5-css3-image-slider-divide]: /images/20220526/2519780f909e49e48c665279da122caf.png
[html5-css3-image-slider-divide 1]: http://www.html5tricks.com/demo/html5-css3-image-slider-divide/index.html
[Link 9]: http://www.html5tricks.com/html5-css3-image-slider-divide.html