标签归档:HTML5动画

超炫酷的HTML5图片水面倒影和波纹动画

还记得以前分享过一款超级棒的HTML5 WebGL水面水波荡漾特效吗?是的,HTML5确实是特别炫酷,尤其是Canvas的灵活使用。今天要分享的也是一款基于HTML5 Canvas的图片水面倒影和波纹动画,利用这款应用我们可以将任意一张图片添加水面倒影的特效,并且添加水面波浪起伏的动画,就好像图片中的景物都在湖面倒影上一样。

html5-canvas-image-water-wave

在线演示源码下载

HTML5浪漫爱心表白动画

今天上一个对程序员非常重要的表白神器,一个基于HTML5的浪漫爱心表白动画,写上你表白对象的名字,名字周围即会出现许多闪亮的爱心,并围绕成一个大的爱心,大爱心会跟随鼠标一起旋转,动画效果非常不错。

html5-heart-explain

在线演示源码下载

超炫酷实用的动画插件anime.js实例分享

今天我们要为大家介绍一个基于JavaScript的动画插件anime.js,利用anime.js我们可以非常方便地实现各种各样的网页动画,比如元素的移动和旋转、轨迹运动等。本文就挑选了几个anime.js中最为典型的动画作为实例分享给大家。

animejs-plugin

在线演示源码下载

HTML5 Canvas实现各种炫酷的仪表盘动画

还记得我们以前分享过一款6种样式的jQuery仪表盘指示器动画插件吗?是不是非常酷?今天我们要继续为大家分享一款基于HTML5 Canvas的仪表盘动画,仪表盘包括指南针、里程表、体温计等,你可以通过脚本控制其是否展示动画,动画效果都非常不错。

html5-canvas-dashboard

在线演示源码下载

CSS3鼠标滑过图标放大旋转动画

这次我们要分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果。我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的。由于只用到CSS3,所以实现的代码比较简单。

css3-hover-icon-rotate

在线演示源码下载

适配移动端的HTML5电子书翻页动画特效

前几天我们分享过一款HTML5 电子书翻页 3D 动画特效,翻页效果非常不错。今天我们要再介绍另外一款HTML5电子书翻页特效,它的一大特点是适配移动端,也就是在手机、平板上使用这款电子书将会非常不错。另外它还可以自动翻页和指定页面定向功能,并且翻页过程中还有逼真书本翻页声音。

html5-ebook-paging-mobile

在线演示源码下载

HTML5 Canvas 赛车游戏动画

很久没有给大家分享HTML5游戏了,这次我们给大家带来了一款基于HTML5 Canvas的赛车游戏,你可以使用键盘中的方向键来控制赛车,当然因为它只是模拟动画,所以并没有像真正的赛车游戏那样功能强大,不过这也可以帮助你很好的学习HTML5相关知识。

html5-canvas-car-racing

在线演示源码下载

HTML5 电子书翻页 3D 动画特效

之前我们也介绍过一些基于jQuery和HTML5的书本翻页动画,比如这款CSS3书本翻页动画和这款jQuery书本翻译插件效果都非常不错。今天要分享一款基于HTML5的电子书翻页3D动画特效。这个翻页动画支持全屏阅读、保存等功能,稍作修改可以成为一个不错的电子书阅读器。

html5-3d-book-paging

在线演示源码下载

超炫酷的 HTML5 Canvas 全屏动画背景

今天要给大家分享一款超炫酷的HTML5 Canvas全屏动画背景,一共有7组Canvas动画。如果你的网页需要一种类似屏保动画的特效,那么这款HTML5 Canvas动画可以很好的满足你的需求。因为动画是全屏的,所以外观看上去也非常大气。

html5-canvas-fullscreen-background

在线演示源码下载

jQuery/CSS3实现小鸟飞翔动画

这是一个基于jQuery和CSS3的小鸟飞翔动画,动画的实现原理并不难,准备8张小鸟飞翔时的图片,然后利用jQuery让8张图片循环播放,形成简单的小鸟飞翔动画特效。之前也分享过一款基于HTML5的卡通小鸟动画,也是十分可爱。

jquery-css3-bird-fly

在线演示源码下载