几款HTML5/CSS3应用及代码介绍

　　《p》新的一周开始，小编也将继续为大家分享精彩的HTML5应用，还有CSS3和jQuery方面的东西。今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码，一起来看看吧。《/p》《h2》1、基于HTML5 Canvas的图表插件Chart.js《/h2》《p》chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效，这也是HTML5 Canvas的一大功劳。 《/p》《p》《a href=“http://www.html5tricks.com/demo/chartjs/samples/radar.html”》《img src=“http://img.blog.csdn.net/20170730190033083” alt=“chartjs-html5-canvas” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/chartjs/samples/bar.html”》柱形图《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/line.html”》折线图《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/pie.html”》饼状图《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/doughnut.html”》环形图《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/radar.html”》雷达图《/a》 / 《a href=“http://www.html5tricks.com/demo/chartjs/samples/polarArea.html”》极线图《/a》 / 《a href=“http://www.html5tricks.com/chartjs-html5-canvas.html”》源码下载《/a》《/p》《h2》2、HTML5 3D动画柱状图表《/h2》《p》这次我们要分享一款很酷的《a href=“http://www.html5tricks.com/” title=“HTML5”》HTML5《/a》 3D图表应用，它是一款柱状图表，呈3D的外观样式，并且我们可以改变图表的颜色主题，让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据，在切换的时候有不错的动画效果，而且，我们还可以切换图表的大小，以适应不同大小的浏览窗口。 《/p》《p》《a href=“http://www.html5tricks.com/demo/Animated3DBarChart/index.html”》《img src=“http://img.blog.csdn.net/20170730190238719” alt=“html5-3d-animated-chart” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/Animated3DBarChart/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/html5-3d-animated-chart.html”》源码下载《/a》《/p》《h2》3、CSS3 3D环形进度条 带进度百分比《/h2》《p》这是一款基于纯CSS3的环形进度条，而且，从外观上看，这款进度条很有3D立体的感觉，尤其是在进度条上有立体的投影，显得非常小巧迷人。另外，进度条的环形中央带有进度百分比，可以实时根据进度来更新百分比的数值，和之前分享的《a href=“http://www.html5tricks.com/html5-half-circle-progress.html”》HTML5/CSS3扇形进度条动画《/a》相比有一定优势。 《/p》《p》《a href=“http://www.html5tricks.com/demo/css3-3d-circle-progress/index.html”》《img src=“http://img.blog.csdn.net/20170730190316007” alt=“” title=“css3-3d-circle-progress”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/css3-3d-circle-progress/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/css3-3d-circle-progress.html”》源码下载《/a》《/p》《h2》4、纯CSS3垂直Tab菜单 Tab样式可自定义《/h2》《p》Tab菜单在网页上使用起来非常方便，也比较节省空间，所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单，它是用纯CSS3实现的，加载和切换特别灵活。另外，Tab菜单的样式你可以使用CSS重新定义，扩展很方便。 《/p》《p》《a href=“http://www.html5tricks.com/demo/jquery-ver-tab-menu/index.html”》《img src=“http://img.blog.csdn.net/20170730190405749” alt=“css3-ver-tab-menu” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/jquery-ver-tab-menu/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/css3-ver-tab-menu.html”》源码下载《/a》《/p》《h2》5、纯CSS3水平控制按钮开关《/h2》《p》今天我们要来分享一款基于纯CSS3的水平控制开关按钮，它有3种不同的颜色风格，开关按钮的数量可以自己定义，鼠标点击按钮时背景色块将会缓慢移动到所在的按钮位置，表示用户已经选中这个选项。我们可以用它来控制用户的选择项。 《/p》《p》《a href=“http://www.html5tricks.com/demo/pure-css3-hor-button-switch/index.html”》《img src=“http://img.blog.csdn.net/20170730190436950” alt=“pure-css3-hor-button-switch” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/pure-css3-hor-button-switch/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/pure-css3-hor-button-switch.html”》源码下载《/a》《/p》《h2》6、HTML5/CSS3 3D焦点图 支持鼠标滚轮《/h2》《p》记得以前给大家分享过一款很酷《a href=“http://www.html5tricks.com/html5-3d-gallery.html”》HTML5 3D相册《/a》，不知道你有没有研究过源码。今天我再向大家分享一款基于HTML5和CSS3的焦点图相册，在浏览图片时，没激活的图片并不是完全隐藏，而是以3D半透明的方式陈列在主图旁边。值得注意的是，这款《a href=“http://www.html5tricks.com/tag/html5-3d” title=“HTML5 3D”》HTML5 3D《/a》焦点图支持鼠标滚轮来切换图片。 《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-css3-carousel/index.html”》《img src=“http://img.blog.csdn.net/20170730190505707” alt=“html5-css3-carousel” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-css3-carousel/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/html5-css3-carousel.html”》源码下载《/a》《/p》《h2》7、jQuery仿iPhone解锁滑块焦点图《/h2》《p》这是一款基于jQuery的仿iPhone解锁滑块焦点图，还记得早期iPhone解锁装置么，现在我们将这样的样式应用到这款jQuery焦点图上。你可以滑动鼠标，该解锁装置就会跟随鼠标一起滑动，同时，图片也就完成了切换的效果。 《/p》《p》《a href=“http://www.html5tricks.com/demo/jiaoben334/index.html”》《img src=“http://img.blog.csdn.net/20170730190529760” alt=“jquery-iphone-image-slider” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/jiaoben334/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/jquery-iphone-image-slider.html”》源码下载《/a》《/p》《h2》8、HTML5 DNA螺旋旋转动画效果《/h2》《p》这是一款基于HTML5的螺旋动画特效，它就像DNA分子结构一样，可以绕着中心线不停地旋转。对于HTML5旋转动画，之前我们也介绍过一款，比如这款《a href=“http://www.html5tricks.com/html5-3d-image-block.html”》HTML5 3D图片切片滑块旋转动画《/a》，就非常不错，大家也可以看看。 《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-dna-screw-animation/index.html”》《img src=“http://img.blog.csdn.net/20170730190553705” alt=“html5-dna-screw-animation” title=“”》《/a》《/p》《p》《a href=“http://www.html5tricks.com/demo/html5-dna-screw-animation/index.html”》在线演示《/a》 / 《a href=“http://www.html5tricks.com/html5-dna-screw-animation.html”》源码下载《/a》《/p》《p》以上就是8款最受欢迎的HTML5/CSS3应用及代码，欢迎收藏分享。转载请注明原文链接：《a href=“http://www.html5tricks.com/8-pop-html5-css3-apps.html”》http://www.html5tricks.com/8-pop-html5-css3-apps.html《/a》《/p》