zoukankan      html  css  js  c++  java
  • 精妙无比 8款HTML5动画实例及源码

    1、基于HTML5 Canvas的图表插件Chart.js

    chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效,这也是HTML5 Canvas的一大功劳。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 1

    柱形图

    折线图

    饼状图

    环形图

    雷达图

    极线图

    源码下载

    2、HTML5/CSS3图片网格动画特效

    HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱。今天要分享的这款HTML5图片网格动画特效就非常炫酷。图片缩略图按网格的布局一行行排列,你只需点击按钮即可让这些图片出现不可思议的动画效果,值得一看。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 2

    在线演示

    源码下载

    3、SVG HTML5可爱的小鸟卡通动画

    今天我们再来分享一款用HTML5和SVG相结合的动画特效,它是一只非常可爱的卡通小鸟,非常不错的是,这只HTML5小鸟不仅外观呈现3D立体,而且还会拍动翅膀和在空中浮动,真实妙极了。之前我们也用CSS3来制作过很多动物特效,非常不错。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 3

    在线演示

    源码下载

    4、HTML5 Canvas烟花动画 可控制烟花速度和大小

    这款HTML5烟花动画我们应该比较熟悉,因为之前有分享过类似的HTML5动画了。这个HTML5烟花动画是基于canvas的,可以说是之前分享那款的升级版,它可以控制烟花上升的速度和烟花绽放花朵的大小。由于是在HTML5 Canvas画布上完成,因此也就非常灵活。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 4

    在线演示

    源码下载

    5、HTML5 Canvas 3D折线图表应用

    今天我们再来讨论一下关于HTML5图表应用的问题,这款HTML5图表是基于canvas的3D折线图表,图表在初始化的时候会根据数据点把折线分割成多条线段,然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果,所以图表的折线也和其他折线图表的不同。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 5

    在线演示

    源码下载

    6、jQuery/CSS3书本翻页动画特效 多功能选项支持

    这是一款基于jQuery和CSS3的书本翻页动画特效,该书本翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页,也可以使用鼠标拖拽页脚来实现翻页动画。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 6

    在线演示

    源码下载

    7、CSS3 3D环形进度条 带进度百分比

    这是一款基于纯CSS3的环形进度条,而且,从外观上看,这款进度条很有3D立体的感觉,尤其是在进度条上有立体的投影,显得非常小巧迷人。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 7

    在线演示

    源码下载

    8、HTML5 3D动画柱状图表

    这次我们要分享一款很酷的HTML5 3D图表应用,它是一款柱状图表,呈3D的外观样式,并且我们可以改变图表的颜色主题,让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据,在切换的时候有不错的动画效果,而且,我们还可以切换图表的大小,以适应不同大小的浏览窗口。

    精妙无比 8款HTML5动画实例及源码 - 爱七七五八网 - 8

    在线演示

    源码下载

    本文固定链接: http://www.i7758.com/archives/1633.html

  • 相关阅读:
    105.UDP通信实现广播
    104.tcp多线程读写实现群聊
    103.tcp通信实现远程控制
    102.tcp实现多线程连接与群聊
    101.自动注入
    100.dll调用
    99.遍历进程并直接写入内存
    98.TCP通信传输文件
    97.TCP通信
    96.udp通信
  • 原文地址:https://www.cnblogs.com/i7758/p/4513581.html
Copyright © 2011-2022 走看看