你的位置:首页 > 网页设计

[网页设计]8款超酷的HTML5 3D图片动画源码


1.HTML5移动端图片左右切换动画

今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动。功能上,这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上,这款HTML5图片切换动画的两侧有淡化处理,因此更显立体效果。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 1

在线演示

源码下载

2.可爱的CSS3圆盘时钟动画

之前我们分享过一些基于CSS3和jQuery的圆盘时钟,比如纯CSS3实现圆盘时钟动画和HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 2

在线演示

源码下载

3.CSS3 登录表单 个性化登录按钮

这是一款基于jQuery和CSS3的登录表单,登录表单的界面整体呈现扁平化风格,非常简洁和清新。当焦点在表单的输入字段上时,表单提示文字会出现一个小动画,同时这款CSS3登录表单的最大特点是其个性化的登录按钮,鼠标滑过也有不错的效果。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 3

在线演示

源码下载

4.自适应jQuery焦点图插件 支持移动端触摸

今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 4

在线演示

源码下载

5.CSS3 Sprite 技术实现僵尸行走动画

行走动画是CSS3动画的经典类型之一,今天要分享的这款CSS3僵尸行走动画与之前介绍的纯CSS3人物行走动画和纯CSS3实现大象走路动画不同,它是利用CSS Sprite技术实现的,也就是在同一张图片中绘制僵尸行走的每一帧,然后通过CSS3和JavaScript将这些帧播放,就形成了行走动画特效。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 5

在线演示

源码下载

6.超炫酷的HTML5视频播放器 支持手机移动页面

之前我们介绍过不少基于HTML5的视频播放器和音频播放器,有些都非常有个性,比如这款HTML5卡带式古典播放器和超酷播放器UI界面的HTML5视频播放器。今天要分享的这款也是HTML5视频播放器,但它的特点是支持手机移动页面,播放器的尺寸可以自适应各种设备。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 6

在线演示

源码下载

7.jQuery水平时间轴内容切换插件

之前我们分享过很多基于Tab形式的内容切换jQuery插件,效果比较好的比如HTML5 SVG Tab滑块菜单以及CSS3外观漂亮淡入淡出Tab菜单。今天要分享的jQuery插件也是内容切换功能,不过它的特点是切换按钮以水平时间轴的形式,很有创意。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 7

在线演示

源码下载

8.jQuery循环流程图表 可动态新增节点

今天我们要来介绍一款比较特别的jQuery图表应用,它是一个环形的循环流程图表,图表中的每一个节点都由一个有向箭头互相连接,该图表的特点在于,你可以动态想图表中插入一个节点,有了这个功能,我们就可以让这个图表变得相当实用了。

8款超酷的HTML5 3D图片动画源码 - 爱七七五八网 - 8

在线演示

源码下载

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