分类目录归档:HTML5应用

纯CSS3开关样式的自定义单选框

之前我们分享过很多非常实用的自定义单选框和复选框插件,大部分都是通过CSS3实现,比如这款CSS3漂亮的自定义Checkbox复选框;也有些是基于jQuery的,比如这款jQuery美化版复选框checkbox。今天给大家分享另外一款基于纯CSS3的开关样式的自定义单选框插件,一共四种样式,都比较有创意。

pure-css3-switch-radio

在线演示源码下载

CSS3弧形曲线循环菜单导航 菜单项图标高亮

今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮,当切换到某一个菜单项时,菜单项会沿着曲线移动到当前视窗,同时显示对应的小图标,更重要的时,菜单项的切换是循环的,因此使用起来也非常方便。

css3-arc-menu-with-icon

在线演示源码下载

HTML5/CSS3超链接图片弹出动画

今天给大家分享一个基于HTML5和CSS3的超链接动画,这个HTML5应用还是比较实用的,它可以让你在鼠标滑过超链接时弹出图片,就像弹出tooltip那样的动画效果。因为用上了一些CSS3的动画属性,所以这个超链接图片弹出动画有很多种,你也可以自己尝试定义一些新的动画效果。

html5-canvas-link-image

在线演示源码下载

纯CSS3模拟谷歌Loading加载动画

我们已经为大家分享过很多基于纯CSS3的Loading加载动画了,大部分都是一些简单的几何图形组合而成的循环播放动画,例如这个纯CSS3方块翻转效果的Loading加载动画就是通过简单的这方形叠加形成的动画。今天给大家带来另外一款模拟谷歌的纯CSS3 Loading加载动画,一共有6种动画效果。

pure-css3-google-loading

在线演示源码下载

HTML5 Canvas爱心表白动画特效

在很久以前,我们给大家分享过一款浪漫程序员 HTML5爱心表白动画,很多读者都表示非常震撼。这次我们同样再分享一款基于HTML5 Canvas的爱心表白动画特效,从视觉上看,它也是一个爱心轮廓,但是不同的是这个爱心轮廓由许多跳动的小爱心组成,更加有一种3D立体的效果,程序员的你就拿去用吧。

html5-canvas-heart-love

在线演示源码下载

CSS3深色背景的垂直手风琴菜单

手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。这次要分享的也是一款基于CSS3的深色背景的垂直手风琴菜单,实现原理与之前的比较类似,但是菜单展示形式略有不同,这个手风琴菜单当展开时子菜单会有水平飞入的动画效果。

jquery-css3-accordion-menu-t

在线演示源码下载

HTML5 Canvas 3D跳动Loading加载动画 可调节参数

我们用CSS3制作过很多炫酷的Loading加载动画,比如这款纯CSS3漩涡样式的Loading加载动画CSS3发光线条旋转Loading加载动画。这次要分享的是一款基于HTML5 Canvas的3D跳动Loading加载动画,它的另一个特点是可以动态调节动画参数。

html5-canvas-3d-loading

在线演示源码下载

纯CSS3流星雨动画

今天给大家分享一个很有意思的纯CSS3动画,它模拟了流星雨落下时的情景。这个动画正是利用了CSS3的一些新特性,包括直线的倾斜,颜色渐变等,不仅绘制出了很多流星图形,而且让这些流行随机地产生并滑过天空,效果非常不错。

pure-css3-meteor-shower

在线演示源码下载

纯CSS3卡通水母动画

我们为大家分享过很多基于纯CSS3的卡通动画,例如近期分享的纯CSS3卡通火车沿轨道行驶动画就非常不错。今天我们分享另外一款纯CSS3的卡通水母动画,水母是通过HTML和CSS代码绘制而成,同时通过CSS3的动画特性让水母不断的游动,效果非常逼真。

pure-css3-jellyfish

在线演示源码下载

纯CSS3炫酷的文字背景动画

CSS3的出现可以让我们使用纯CSS就可以实现一些比较复杂的网页动画特效,比如可以让最单调的文字出现炫酷的背景动画,这是在CSS3之前无法想象的。今天分享一个纯CSS3实现的文字背景动画,文字的背景不是纯色,也不是渐变色,而是不断播放的动画,这让文字产生了更多的活力。

pure-css3-text-bg-animation

在线演示源码下载