分类目录归档:HTML5应用

HTML5 Canvas金色漩涡动画

HTML5动画技术在Canvas上得到了充分的发挥,我们之前也分享过很多基于HTML5 Canvas的动画特效,比如最近分享的HTML5 Canvas雾状火焰动画。这次我们给大家带来另外一款超炫酷的HTML5 Canvas金色漩涡动画,漩涡中不停旋转的水波非常的逼真。

html5-canvas-golden-swirl

在线演示源码下载

CSS3 3D倾斜视差图片特效

CSS3有一些属性能够实现3D的视觉效果,将这些3D特性应用到图片上时就可以让图片呈现出立体的效果。今天给大家带来的这款基于CSS3的3D倾斜视差图片特效非常不错,图片上方悬浮文字标题,并且在图片周围添加合适的投影,同时会随着鼠标的移动形成3D视差效果。

css3-3d-lean-image

在线演示源码下载

CSS3发光线条旋转Loading加载动画

最近,我们刚刚分享过一款纯CSS3实现的六边形加载动画,这种利用几何图形实现Loading动画的创意还是不错的。这次我们要分享的也是一款基于纯CSS3的Loading加载动画,它由2条逆向旋转的发光线条组成,在黑色的背景下,这种发光的动画显得更加漂亮。

css3-shine-line-loading

在线演示源码下载

纯CSS3实现3D展开动画的图标菜单

我们知道利用CSS3可以制作很多效果炫酷的3D动画特效,比如这次要分享的一款CSS3菜单,它正是利用了CSS3的一些特性,实现了菜单展开时的3D动画特效,同时当你将鼠标滑过菜单项时,菜单项还会呈现发光的效果,从而使整体的视觉效果更佳立体炫酷。

css3-3d-icon-menu

在线演示源码下载

HTML5 Canvas和SVG实现的五彩万花筒动画

Canvas的优势在于允许你在画板上任意绘制图形,SVG的优势在于可以很方便的在网页上绘制各种形状的路径。今天分享给大家的就是一款基于HTML5 Canvas和SVG的五彩万花筒动画,五彩斑斓的彩色路径将会不停的变换形状和颜色,效果非常炫酷。

html5-svg-color-cylinder

在线演示源码下载

纯CSS3实现的六边形加载动画

之前我们分享过很多样式各异的CSS3 Loading动画,例如这个纯CSS3五彩Loading加载动画CSS3液体形态的Loading动画。这次给大家带来另外一个基于纯CSS3的六边形加载动画,这个Loading动画的特点是有许多个小的六边形组合成一个大六边形,在等待加载的时候小六边形和大六边形之间不停的组合切换。

pure-css3-hexagon-loading

在线演示源码下载

SVG和CSS3实现的爱心Like按钮

在现代网页中,我们经常可以在一些文章、视频和图片页面上找到”Like”按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮,如果你想让它们具有特别的动画特效,那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画的Like按钮,主要采用了SVG和CSS3这两个技术。当你点亮Like按钮时,按钮的四周将会散发出多个五彩绚丽的爱心。

svg-css3-heart-like-button

在线演示源码下载

基于 ApexCharts 的 HTML5 曲线图表 可选取数据范围

ApexCharts是一款基于JavaScript和HTML5的现代化图表库,功能十分强大。今天要分享的这款曲线图表便是基于ApexCharts实现的,图表最终以SVG的形式展示在浏览器上。这款图表的另一个特点是可以自定义选取数据的范围,范围确定后,图表中同时显示该范围中的曲线图形和柱状图形。类似的还有这款HTML5 Canvas图表应用Chart.js

html5-apexcharts

在线演示源码下载

超酷的HTML5/CSS3 3D气泡悬浮菜单

之前我们分享过各式各样的网页菜单,有基于jQuery的,也有基于HTML5和CSS3的,很多都比较炫酷和实用,比如这款jQuery 3D 垂直多级菜单就非常实用,还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单,每一个菜单项是一个个3D样式的悬浮气泡,点击菜单项后就可以激活当前菜单。

html5-3d-bubble-menu

在线演示源码下载

HTML5房屋装饰工具 自定义房屋各个部位

这是一个基于HTML5和CSS3的房屋装饰工具,工具为房屋的各个部位提供了不同的材料和颜色,点击相应的材料即可将对应部位的材料切换成所选的。这个工具有点类似人物形象换装工具,可以更换人物每个部位的穿着。另外这个工具的知识点在利用CSS3实现3D的动画特效,当你移动鼠标时你可以看到房屋的各个侧面情况。

html5-house-decorator

在线演示源码下载