HTML5立体圆环旋转动画 HTML5 3D效果

HTML5 3D动画效果非常多,我们在html5tricks上也分享过一些,比如3D HTML5 Logo动画,旋转效果非常逼真。今天我们来看一款基于HTML5的立体圆环旋转动画,该特效主要利用了CSS3的-webkit-transform-style属性,效果非常酷。

html5-3d-circle-rotate

在线演示源码下载

HTML5/CSS3开关按钮 立体3D按钮

之前我介绍过几款漂亮的CSS3开关切换按钮,比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的,代码非常简单,3D效果也还可以。

html5-css3-switch-button

在线演示源码下载

HTML5鲸鱼动画 又一款超酷HTML5动画

之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。

html5-whale

在线演示源码下载

Google Doodle三八节Logo HTML5小动画

2014年的三八妇女节刚过去不久,让我们来回味一下节日那天Google为全球妇女更换的Logo动画。该Logo动画利用了CSS3技术实现图形的转圈和播放效果,Google的创意总是那么特别,尤其是把HTML5技术玩的淋漓尽致。

google-38-logo-animation

在线演示源码下载

7款HTML5/CSS3应用新鲜出炉 功能强大实用

这段时间我们已经陆续向大家分享了很多绚丽实用的HTML5/CSS3应用插件,今天,我从资料库中精选了7款最新出炉的HTML5/CSS3应用分享给大家,希望大家喜欢。

1、HTML5/CSS3发光文字 可自定义文字色彩 效果很赞

前几天我已经向大家分享了两款HTML5/CSS3文字特效,尤其是这款HTML5 Canvas字母文字颗粒动画 可设置重力感应,更是动感。今天要分享的这款HTML5/CSS3文字效果也十分帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色。

6-html5-css3-shine-text

在线演示        源码下载

2、HTML5/CSS3粒子效果进度条 超炫酷进度条动画

之前我已经分享了几款效果很不错的CSS3进度条插件,比如CSS3 Loading进度条加载动画特效CSS3 3D进度条按钮 18款精美样式。今天我再来分享一款很有特色的HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来,是一款别具特色的HTML5进度条插件。

html5-css3-pixel-progress-bar

在线演示        源码下载

3、精美CSS3表单 CSS[......]

阅读全文>>

HTML5/CSS3发光文字 可自定义文字色彩 效果很赞

前几天我已经向大家分享了两款HTML5/CSS3文字特效,尤其是这款HTML5 Canvas字母文字颗粒动画 可设置重力感应,更是动感。今天要分享的这款HTML5/CSS3文字效果也十分帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色。

6-html5-css3-shine-text

在线演示源码下载

HTML5/CSS3粒子效果进度条 超炫酷进度条动画

之前我已经分享了几款效果很不错的CSS3进度条插件,比如CSS3 Loading进度条加载动画特效CSS3 3D进度条按钮 18款精美样式。今天我再来分享一款很有特色的HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来,是一款别具特色的HTML5进度条插件。

html5-css3-pixel-progress-bar

在线演示源码下载

HTML5 3D衣服摆动特效 超酷HTML5 3D动画

前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。

html5-3d-cloth

在线演示源码下载

HTML5粘浏览器的小泥块 超级可爱动画

这款HTML5动画非常可爱,动画的主角是一款粘人的小泥块,用鼠标拖动泥块,泥块即可粘住浏览器,让后一点点掉落下来。而完成这样的HTML5动画,我们只需一张图片和一系列CSS3代码即可。虽然这款动画实用性并不强,但是其中的HTML5原理值得大家学习。

html5-sticky

在线演示源码下载

分享8款最新超酷HTML5/CSS3特效及源码

这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效、HTML5焦点图特效、CSS3/HTML5进度条特效等类型,一起来看看吧。

1、CSS3/jQuery全屏立体焦点图 时尚大气

jQuery是一个非常流行的Javascript框架,今天我们要分享一款基于jQuery和CSS3的焦点图动画,该jQuery焦点图插件是全屏立体的效果,看上去非常时尚和大气。而且,焦点图在图片滑动的时候非常流畅,性能应该也还不错。

css3-jquery-fullscreen-image

在线演示        源码下载

2、HTML5/CSS3文字投影特效 乳白阴影文字效果

之前向大家分享过一款HTML5 Canvas字母文字颗粒动画,效果非常不错,由此可见,利用HTML5和CSS3可以方便的实现很多以前很难实现的文字特效。今天我要向大家介绍一款HTML5/CSS3文字投影特效,它的使用也很简单,HTML5文字阴影效果也比较酷。

html5-milky-text

在线演示        源码下载

3、HTML5/CSS3实现旋转图片播放焦点图 旋转比较流畅

HTML5焦点图可以实现很多炫酷的效果,就像这款CSS3百叶窗焦[......]

阅读全文>>