.Thom Sander (演示|下载)

2.Wedding Website Template with jQuery Slider (演示|下载)

3.Folder (演示|下载)

4.Free Website Template with JustSlider (演示|下载)

5.Point (演示|下载)

6.Hatha Yoga (演示|下载)

7.Animated Template for Design Studio (演示|下载)

8.AppleGreen HTML5 and CSS3 Template (演示|下载)

9.Art School Template (演示|下载)

10.Fascination HTML5 and CSS3 Template (演示|下载)

11.HTML5 Charity Center Template (演示|下载)

12.Interio (演示|下载)

13.Real Estate Website (演示|下载)

14.Template for Exterior Design Project with jQuery Slider (演示|下载)

15.Template for Food Delivery Project (演示|下载)

16.Template for Law Business (演示|下载)

17.Template for Youth Organization (演示|下载)

18.Template with jQuery Gallery for Music Site (演示|下载)

19.Template with jQuery Slider for Car Project (演示|下载)

20.Template with jQuery Slider for Consulting Business (演示|下载)

TML5的强大之处不仅在于让网页元素更加灵活多变，更在于它可以很方便地实现各种网页动画特效，让你的网站更加富有现代化特色。就现在的浏览器而言，已经基本都支持HTML5了，所以这也方便了我们开发者免去了考虑浏览器兼容性的头疼问题。今天要分享一些令人难忘的HTML5炫酷动画，希望大家会喜欢。

分享之前我先推荐下我自己的web前端学习交流群：675498134，不管你是小白还是大神，我都欢迎你们过来学习交流，不定期分享干货，包括我自己整理的最新的前端资料和教程送给大家，欢迎初学和进阶中的小伙伴，一起学习一起交流，共同进步。

1、HTML5火球挡板碰撞动画游戏

今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动，你可以移动鼠标滑动屏幕下方的挡板，火球碰撞到挡板后，即可反弹出去，这是个很有特色的HTML5游戏。

2、HTML5/CSS3圆盘秒表动画 秒表可暂停计时

今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。

3、3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗？这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本，在原来的基础上，衣服布料呈3D环形显示，你同样可以用鼠标拖拽衣服，不过和之前不同的是，鼠标左键用来拖拽衣服，鼠标右键用来切割衣服，失去了之前鼠标用力程度和衣服破碎程度的关系，似乎功能上有所缺失，但是HTML5 3D功能还是不错的。

4、纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器，效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观，还是相当逼真的，然后用CSS3的动画属性实现了磁带的旋转，就像在播放歌曲一样，如果配合HTML5的音频播放功能，就和那个磁带播放器差不多了。

5、HTML5仿Apple Watch时钟动画

Apple Watch刚刚发布不久，就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了，并且这款HTML5仿Apple Watch的时钟是动态的，可以根据本地时间实时更新指针数据。时钟的界面非常华丽，确实有苹果的风格，HTML5也的确非常强大。

6、纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

7、HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真，之前我们也分享过一些其他的HTML5火焰燃烧动画，比如：HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。

8、CSS3图片倾斜效果 可倾斜四个角度

今天我们再来分享一款CSS3图片特效，它可以让网页上的图片倾斜任意的角度，其实在CSS3中实现图片的倾斜非常简单，我们并不需要利用复杂的JS计算各种角度，只要用CSS3的transition属性即可完成图片的倾斜效果，非常简单，具体实现大家可以看DEMO演示。

分享到这里就告一段落了，学习web前端的朋友可以来我的群，群里每天都有对应资料学习：675498134，欢迎初学和进阶中的小伙伴。

| 小天

文章源自：起点学院学习联盟

在小白们眼里，大神们的数据分析报表基本上是这样的……

要么就是像这样的……

而大部分人，差不多是这样的……

啊多么痛的领悟……

怎样才能又快又好地做出一份高颜值的数据报表呢？带着立志要把这样的图表从癞蛤蟆脱胎成白天鹅的坚定和悲壮，这里搜集了5个笔者之前用过，用户评价不错，用起来还顺手的可视化数据平台。

话不多说，直接上正文。如果你也有推荐的平台，欢迎留言分享~

- 1 -Echarts

没想到这个第一次用就惊艳到我的产品竟然是国产，而且还来自百度，简直堪称良心。先上几张用Echarts制作的效果图。

貌似很多小伙伴喜欢用Echarts制作地图类的可视化效果……毕竟酷炫……

除了这些惊艳的地图，Echarts同样可以运用于散点图、折线图、柱状图等这些常用的图表的制作。

如果你需要展示实时变化的数据，相信Echarts里的动态接口会对你十分有帮助。

Echarts的优点在于，文件体积比较小，打包的方式灵活，可以自由选择你需要的图表和组件。而且图表在移动端有良好的自适应效果，还有专为移动端打造的交互体验。

- 2 -Highcharts

这个也是很多小伙伴在使用的一个平台。完全不用担心找不到参考的样图，因为已经有很多中国区的用户在上面更新并维护着很多实例，你往往能从这些丰富的例子找到类似的表达样图。

它的图表类型自然也是很丰富啦，线图、柱形图、饼图、散点图、仪表图、雷达图、热力图、混合图等类型的图表都可以制作，也可以制作实时更新的曲线图。

Highcharts对非商用免费，对于个人网站，学校网站和非盈利机构，可以不经过授权直接使用 Highcharts 系列软件。Highcharts还有一个好处在于，它完全基于 HTML5 技术，不需要安装任何插件，也不需要配置 PHP、Java 等运行环境，只需要两个 JS 文件即可使用。

- 3 -帆软报表（FineReport）

FineReport的可视化效果虽然没有上面两种那么酷炫，因为定位是报表软件。但是赢在操作相当简易，不会上面那些复杂的代码也没关系。它采用类似于Excel的编辑器，只需要点选拖拽等操作，拖动数据列绑定至对应单元格，简单设置就可以在web端查看数据展示。

目前，它有普通报表、聚合报表和决策报表三类报表设计模式，基本可以满足企业各类日常数据分析的情景需求。

数据的可视化与交互效果也很不错。最牛逼的可以做高大上的动态报表

还有一个比较强大的地方，就是它的数据填报。区别于传统意义上只能做数据展示的报表，FineReport允许用户对数据库的增删改。而且，它填报报表的流程非常简单，只要四步：报表设计、控件添加、设置填报属性和填报录入，这样，填报工作就能轻松搞定啦~

- 4 -数说立方

数说立方是大数据应用与服务提供商“数说故事”旗下一款面向数据分析师的在线商业智能产品。在数据的可视化呈现方面，操作比较简便，即使是非数据分析的专业人员，也能轻松实现。

同时，它的实时数据可视化引擎也能让使用者可以第一时间获得数据的可视化反馈，直观地了解到数据的变化情况。

- 5- Power BI

Power BI是微软发布的一款可视化BI工具，类似Excel升级版的大表哥。一改以往excel需要数据透视表，写大量函数的复杂特点，这款工具拖拖拽拽操作起来十分简单。