之前我分享过一些时尚的CSS3动画按钮,比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3
3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合,该CSS3按钮一共有5种不同的风格,有几款还有3D立体的效果。一起来欣赏这些可爱的CSS3按钮吧。
This entry was posted in HTML5实例 and
tagged CSS3按钮 on February
28, 2014 by sxwgf.
CSS3图片层叠展开特效 可展开扇形效果
今天要分享的这款CSS3图片特效没有那么绚丽,它的功能非常简单,当你把鼠标移到图片上时,多张图片便会由原先的叠在一起变成展开状态,展开过程中伴随CSS3动画,展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。
This entry was posted in HTML5实例 and
tagged CSS3图片, 图片特效 on February
26, 2014 by sxwgf.
CSS3 Loading进度条加载动画特效 3款绚丽风格
前面我向大家分享了几款非常漂亮的CSS3进度条插件,CSS3 SVG 进度条 Loading 动画、纯CSS3进度条
华丽5色进度条示例。今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的。
This entry was posted in HTML5实例 and
tagged CSS3动画, CSS3进度条 on February
26, 2014 by sxwgf.
12款经典时尚的HTML5应用
今天分享一款基于纯CSS3的发光按钮,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。
这是一款非常有特色的CSS3动画按钮,按钮的背景是各种颜色的小气泡,当鼠标滑过按钮时,这些小气泡便会向上飘动。这些CSS3按钮的气泡背景以及冒泡的动画均由CSS3实现,不仅外观炫酷,而且按钮设计非常有创意。
利用HTML5可以模拟出很多物理特性的实验,比如天体运动、*落体等,今天要分享一个利用纯CSS3实现的齿轮转动实验,实验由多个齿轮组合在一起,主动轮转动后可以带动其他从动轮转动,从而将重物吊起。这个过程没有利用Javascript,而是利用纯CSS3实现,效果很棒。
CSS3按钮在各种CSS3特效中应用最广泛,实用性也最强,并且结合CSS设计可以组合出非常漂亮绚丽的CSS3动画按钮。今天这7组CSS3按钮外观非常时尚,7组不同的动画让这些按钮变得十分动感,这些CSS3动画按钮很适合在产品展示或者游戏页面中应用。
这款基于CSS3的垂直菜单实现很简单,该CSS3垂直菜单有几个特点:
1、菜单外观呈立体视觉效果,非常有质感
2、鼠标滑过菜单项时,菜单项会出现伸缩动画。
这款CSS3图片切换插件非常漂亮,图片切换是百叶窗的效果,更值得注意的是插件提供了4种不同的百叶窗特效,有水平百叶窗、垂直百叶窗和淡入淡出百叶窗等。并且,该CSS3百叶窗图片切换插件切换时非常平滑,效果很不错。
CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。
这次我们需要利用Checkbox结合CSS3来实现一个3D开关切换按钮,该CSS3按钮一共有4款不同的样式风格,有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单,原型是一个checkbox,然后利用CSS3属性来渲染checkbox,从而实现3D按钮的效果。
CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人物行走,而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个CSS3人物行走动画的基础,我们就可以更方便的在浏览器上实现HTML5游戏。
我们经常使用GIF图片来实现Loading加载动画,确实利用GIF图片来实现也非常方便,但需要我们一定的制图功底,我们作为程序员很多对制图一窍不通,那么今天就让我们用CSS3代码来实现漂亮的Loading加载动画吧,下面的12款非常有创意的CSS3 Loading加载动画肯定会让你喜欢上CSS3,喜欢上HTML5。
图片切换在WEB2.0中应用十分广泛,今天分享的这款CSS3迷你图片切换组件有着自己的优势和特点。点击切换按钮时,按钮会出现渐隐渐显的发光特效,图片切换过程中整张图片过渡的效果非常柔和,并且图片描述也相应以动画的方式显示在图片上,是一款非常棒的CSS3图片切换组件。
面包屑菜单一般贯穿整个网站,可以很清晰地描述访客的当前层级目录,让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧,它采用了扁平化设计,让菜单显得更加简单易用,视觉效果也非常不错。该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。
转载注明原文链接:http://www.html5tricks.com/12-fasion-html5-apps.html
This entry was posted in HTML5实例 and
tagged HTML5应用 on February
26, 2014 by sxwgf.
纯CSS3进度条 华丽5色进度条示例
这是一款利用纯CSS3实现的进度条,它的实现非常简单,没有复杂的动画,该CSS3进度条最大的特点是拥有非常漂亮的5种颜色,整个进度条看上去非常专业。这款CSS3进度条和之前的CSS3 3D进度条相比显得更简单易用。
This entry was posted in HTML5实例 and
tagged CSS3进度条 on February
25, 2014 by sxwgf.
CSS3联系表单 清新外观带美化Select表单
之前我向大家分享过一款非常绚丽的CSS3发光表单,的确是很酷,大家可以先看看。今天要分享的这款CSS3表单就比较清新简单了。表单整体看上去很干净,特别的是,该CSS3联系表单有一个自定义的美化select表单,表单项在被激活的时候边框颜色会改变。
This entry was posted in HTML5实例 and
tagged CSS3表单 on February
25, 2014 by sxwgf.
CSS3 飘带菜单 超酷3D CSS3菜单
之前我们分享过不少漂亮的CSS3菜单,CSS3/jQuery创意盒子动画菜单、CSS3垂直菜单 菜单有立体动画视觉、CSS3多级下拉菜单
弹性展开下拉动画。今天要分享的这款CSS3菜单非常特别,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会凸显出来,表现的非常立体动感。
This entry was posted in HTML5实例 and
tagged CSS3菜单 on February
25, 2014 by sxwgf.
CSS3灰色按钮菜单 超具3D立体感
CSS3在按钮应用中非常常见,效果也都不错,一般利用CSS3制作的按钮都会有以下几个特点:1、色彩丰富,按钮不像CSS那样单一,利用CSS3的渐变色可以让按钮变得色彩多姿。2、3D立体效果,利用CSS3投影和阴影特性往往可以让按钮充满立体感。
This entry was posted in HTML5实例 and
tagged CSS3按钮, CSS3菜单 on February
24, 2014 by sxwgf.
3D CSS3按钮 支持单按钮和按钮组
CSS3按钮可以做的非常漂亮,又可以融合一些超酷的动画特效,比如这款按钮纯CSS3 3D按钮 按钮酷似牛奶般剔透,就显得非常大气和动感。今天要分享另外一款相对简单的3D CSS3按钮,该按钮支持单个按钮和按钮组,按钮整体呈3D立体,鼠标滑过按钮凹陷,效果很不错。
This entry was posted in HTML5实例 and
tagged CSS3按钮 on February
24, 2014 by sxwgf.
精美CSS3表单 CSS3带小图标表单 3款样式
之前我们介绍过3款漂亮的CSS3表单,包括一个CSS3发光表单、CSS3密码验证表单、CSS3自定义Checkbox和Radio表单。今天要向大家分享一款基于CSS3和jQuery的带小图标精美输入表单,该CSS3表单一共有3款样式,需要高版本的浏览器才能支持,不过真的是一款很酷的CSS3表单。
This entry was posted in HTML5实例 and
tagged CSS3表单 on February
23, 2014 by sxwgf.