分类目录归档:HTML5应用

CSS3响应式瀑布流图片展示 带倾斜滤镜特效

现在的网站应用被越来越多的移动设备访问,以前网页中的图片通常采用表格的形式展现,但是这不能满足图片尺寸不一致的情况。今天介绍一款基于CSS3的响应式瀑布流图片展示框架,它的特点是可以在电脑端和手机端良好的展示,而且图片还带有倾斜和滤镜的特效。

css3-waterfalls-image-flow

在线演示源码下载

HTML5 SVG实现的星级评分动画

今天给大家分享一款比较实用的HTML5星级评分应用,这款评分应用和以前分享的不同,我们可以在评分的同时,小星星会根据评分结果展示不同的动画特效。另外,这款星级评分动画还使用了SVG的动画特性,如果你对svg比较熟悉,还可以在上面修改更多的评分结果动画特效。

html5-svg-rank-animation

在线演示源码下载

HTML5 Canvas柳枝随风飘摇动画

这是一款用HTML5 Canvas模拟的柳树随风飘摇的动画特效,首先柳枝和柳叶的模拟通过CSS实现,虽然不是很逼真,但是这并不是这个动画的重点。重点在于我们将鼠标滑过柳枝时,就像微风拂过一般,将柳枝和柳叶飘摇起来,这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。

html5-canvas-willow-swing

在线演示源码下载

CSS3实现的卡通文字动画

这是一个利用CSS3动画特性和Google字体库实现的卡通文字动画,首先引入Google的字体库,这样我们就可以在css中使用”Luckiest Guy”字体,这种字体就体现了卡通的样式。再利用CSS3将文字按圆弧路径显示,然后再用CSS3的动画特性让文字显示的时候采用跳入和淡入的方式,实现的比较可爱的动画效果。

css3-cartoon-text

在线演示源码下载

SVG结合CSS3实现的一套动画表情

很早以前我们为分享过一款很可爱的青蛙表情集合,大家的反应都还不错。这次我们要分享的是另外一种表情动画实现方式,就是通过SVG结合CSS3的方式来实现一套动画表情,利用SVG的路径功能绘制表情,然后通过CSS3来让表情产生动画效果。

svg-css3-face

在线演示源码下载

CSS3评分统计柱形图进度条

之前我们分享过很多典型的柱形统计图和进度条,比如这款CSS3实现漂亮的柱形图表和这款jQuery/CSS3动感实用的进度条插件 10种漂亮外观,都用上了CSS3的相关特性。今天我们要分享的是一款CSS3评分统计应用,它正是利用了柱形统计图和进度条的特性,还是比较简洁和漂亮的。

css3-rank-bar

在线演示源码下载

HTML5 背景图片毛玻璃模糊特效

毛玻璃特效其实是对图片的模糊处理,我们经常会在手机app中上拉应用时出现背景图片模糊特效,这就是毛玻璃特效。这次我们要分享一款基于HTML5和CSS3实现的背景图片毛玻璃模糊特效,我们在页面上加载一张清晰图片,然后指定图片范围内生成毛玻璃模糊效果,通过边框阴影的添加,使这种毛玻璃特效更显3D立体效果。

html5-frosted-glass-effect

在线演示源码下载

CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标

今天给大家带来一个比较传统但却非常实用的CSS3应用,它的功能是可以快速生成一个带鼠标滑过特效的图片,当鼠标滑过图片时,图片上方将会打开遮罩层,浮现自定义的标题等文本,也可以采用Font Awesome网页图标库实现各种功能按钮。另外它还有一个特点是可以生成多张这种效果的图片,并实现相应式布局,随着页面大小的调整改变最佳的图片排列方式。

css3-fontawesome-image-hover

在线演示源码下载

纯CSS3骏马奔腾动画特效 带实现细节分析图

还记得不久前给大家分享过的一个HTML5骏马奔跑动画吧,在动画中很好地模拟了骏马奔跑的细节,非常逼真。这次我们分享的也是一个纯CSS3骏马奔腾动画特效,它与前面一个相比,增加了奔跑时尘土飞扬的效果,同时当你点击骏马后,会出现实现该动画的细节分析图。

pure-css3-horse-run

在线演示源码下载

基于TweenMax的HTML5 3D爱心破裂动画

TweenMax是GreenSock动画平台的核心插件,GreenSock是一套用于在所有主流浏览器中制作高性能HTML5动画的工具。今天给大家分享一款基于TweenMax的HTML5 3D爱心动画,它和之前分享的爱心动画不同在于,点击爱心后爱心会破裂,在点击爱心又会重新组合。

tweenmax-html5-3d-heart-break

在线演示源码下载