1、HTML5 SVG Loading 动画加载特效

这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果。每一组Loading动画都非常可爱,他们都非常欢快的转圈,同时又有颜色渐变的动画效果。另外,回顾之前分享的一款CSS3 Loading动画HTML5 Canvas实现超酷Loading动画。

在线演示

源码下载

2、用HTML5/CSS3给女朋友送个生日蛋糕

现在有了HTML5,我们在浏览器上制作动画已经不是什么难事了,但是一个好的创意却很难,比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意,它是用svg来做的,利用HTML5的api让制作蛋糕的过程展示出来,这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦!

在线演示

源码下载

3、HTML5 3D相册图片轮播动画

这是一款基于HTML5和CSS3的3D相册浏览插件,它可以将相册中的图片以3D的方式展示出来,并且你可以滑动下面的滑杆来滑动图片浏览,同时,我们也可以指定数字让其直接跳转到指定的图片。这款HTML5 3D图片轮播动画用起来非常棒。

在线演示

源码下载

4、HTML5/CSS3实现大风车旋转动画

这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的。

在线演示

源码下载

5、HTML5 Canvas头发飘逸动画 很酷的HTML5动画

HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效。今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意。

在线演示

源码下载

6、HTML5小车动画 很酷的HTML5吉普车

有几天没有分享HTML5动画了,今天我们要分享一款利用HTML5/CSS3实现的吉普车动画,小车可以水平滚动,非常逼真。

在线演示

源码下载

7、HTML5/CSS3发光搜索表单 超酷CSS3表单

今天我们要再来分享一款放光表单,是一款CSS3发光搜索表单,表单整体是黑色的风格,搜索框被激活时,输入框就会发光,由于黑色的背景,整个搜索表单就显得格外绚丽光亮。

在线演示

源码下载

8、纯CSS3实现滑杆开关切换按钮动画

今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画,这个按钮是一个摇杆,杆子推上推下来切换开关状态,不同的开关状态也有不同颜色的指示灯。

在线演示

源码下载

9、HTML5/CSS3颜色渐变文字 可指定文字路径

今天我们来分享一款利用SVG实现的文字按路径显示应用,同时文字的填充色也有渐变的效果。

在线演示

源码下载

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

分享9款很有创意的HTML5动画的更多相关文章

  1. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  2. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  3. 10款很酷的HTML5动画和实用的HTML5应用

    1.HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击 ...

  4. 10款很酷的HTML5动画和实用应用 有源码

    10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...

  5. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  6. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  7. 有图有真相,分享一款网页版HTML5飞机射击游戏

    本飞机射击游戏是使用HTML5代码写的,尝试通过统一开发环境(UDE)将游戏托管在MM应用引擎,直接生成了网页版游戏,游戏简单易上手,非常适合用来当做小休闲打发时间. 游戏地址:http://flyg ...

  8. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  9. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

随机推荐

  1. PHP 自动生成导航网址的最佳方法 v20130826

    经常制作开发不同的网站的后台,写过很多种不同的后台导航写法. 最终积累了这种最写法,算是最好的吧.附上截图和代码如下(PHP+HTML) <?php $linkArr = array( 'ind ...

  2. [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

    You can place content inside of the instance of your component element then manage it inside of the ...

  3. python的print(转)

    转载:http://www.pythonclub.org/python-basic/print   使用print输出各型的 字符串 整数 浮点数 出度及精度控制 strHello = 'Hello ...

  4. GXPT(一)——UI设计

    通过长时间的积淀.TGB再次開始GXPT模式,JAVA版..NET版两条线同一时候进行. 纯面向对象的底层架构的搭建:easyUI+MVC的界面设计:工作流的再次雄起.云平台的构想:Confluenc ...

  5. 使用phonegap + appframework2.0框架

    1.页面切换动画结束时卡(禁用动画) 2.搜索或导航标签需要固定(标签选择器动态修改高度) 3.pancel容器默认生成的时候内容不放 通过动态的的$("").empty().ht ...

  6. QT核心编程之Qt线程 (c)

    QT核心编程之Qt线程是本节要介绍的内容,QT核心编程我们要分几个部分来介绍,想参考更多内容,请看末尾的编辑推荐进行详细阅读,先来看本篇内容. Qt对线程提供了支持,它引入了一些基本与平台无关的线程类 ...

  7. Linux 测试网速

    Linux 测试网速 1.直接wget -O /dev/null http://speedtest.wdc01.softlayer.com/downloads/test10.zip 一个10M的文件, ...

  8. 类的__slots__属性

    为什么有"slots"属性? 默认情况下,python对象队象的每个实例(instance)都会有一个字典来存储该实例的属性,这样做的好处在于运行时期每个对象可以任意设置新的属性. ...

  9. spark1.2.0编译

    spark 有三种编译方式:SBT.MAVEN.make-distribution.sh.SBT.MAVEN两种方式打出来的包比较大,不适合部署使用.因此我们通常使用第三种方式打包. ./make-d ...

  10. C#高级特性

    1.接口 接口与抽象基类.抽象类与接口的不同是,抽象类不仅可以定义多态接口还可以定义一些其他的成员以及构造函数.而接口只能包含抽象成员. 抽象父类创建多态接口,只有派生类才可以.而往往很多情况下非派生 ...