摘要:
上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错。先来看看效果图。如何,看上去挺不错吧,倾斜、阴影,让一张很普通的图片变得如此霸气。另外你也可以在这里查看DEMO演示,鼠标滑过图片时会出现这样的... 阅读全文
摘要:
我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一种是折线弯曲的动画,它们实现起来也非常简单,先来看看效果图:看起来还挺特别的吧。。另外你也可以在这里看到这个Loading动画的DEMO演示接下来我们来看看如何用... 阅读全文
摘要:
我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片。还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观不怎么好看。今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框,提示框伴有飞入飞出的动画效果。先来看看效果图。看上去还简单吧,其实实... 阅读全文
摘要:
网页菜单我们见过很多,各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背景,看上去还挺不错的,下面看下一效果图。我想说可能菜单并不是很实用,但是很有创意,而且也方便我们学习CSS3。当然,你可以到这里查看DEMO演示。接下来我们来对这款波浪形菜单的源代码简单分析一下。HTML代码的结构非常简单: ☁ ☀ ☃ ☂ ❆ ☾ 然后是CSS代码,这里我们对菜单项进行绝对定位.b-menu li { overflow: hidden; position: absolute; width: 12em; h... 阅读全文
摘要:
昨天在国外的论坛上逛的时候,看到一篇帖子是求助如何利用CSS3实现发光效果的,网友回复中有一个推荐了一款CSS3发光搜索表单,利用CSS3的动画属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了,我把那个CSS3发光表单下载了下来,先来看一下效果图:图上的搜索框在被激活的时候会出现闪闪发光的特效。我们可以在这里查看CSS3发光搜索表单的DEMO演示。下面我们来一起看看源代码。HTML代码非常简单,一个文本框和一个提交按钮: Search然后重点就是CSS3代码了,首... 阅读全文
摘要:
现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡了而关掉你的网页。前几天我在网上看到一款和一般进度条不太一样的玩意,它的外观是一条直线,末端有个小球,在进度变化时可以显示数字百分比,更可以用不同颜色来表示当前进度的状态。来看看效果图。一看进度条外观,还不错吧。同时,我们也可以在这里看到进度条的DEMO演示接下来我们来分析一下这款HTML5进度条的实现源码,篇幅有限,我们只挑核心的代码来说。HTML代码很简单,构造一个进度条容器和数字百分比容器: 0 首先我们来对进度条的容器进行样式渲染,利用.. 阅读全文
摘要:
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转,先看一下效果截图。看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转。我们可以在这里看到DEMO演示效果接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字: A B C D E F G H I L M N O P Q R S T U V Z接下来是... 阅读全文
摘要:
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用,个个都是干货。1、HTML5/CSS3滑块动画菜单 图标动画很酷CSS3菜单我们之前已经分享很多了,有3D菜单、下拉菜单、Tab菜单等,具体大家可以移步至CSS3菜单栏目下查找。今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷,鼠标滑过菜单项时会有一个漂亮的遮罩移动过来,并且这款动画菜单还有非常酷的图标,菜单整体效果很大气。在线演示 源码下载2、HTML5 Canvas头发飘逸动画 很酷的HTML5动画HTML5 Canvas动画非常炫酷,很多.. 阅读全文
摘要:
清明小长假结束了,小编继续为各位分享HTML5和CSS3相关的资源和代码,这次我们把最新收集8款设计精美的HTML5/CSS3应用分享给大家,欢迎收藏分享。1、CSS3漂亮的自定义Checkbox复选框 9款迷人样式之前我们分享过一款非常不错的CSS3自定义Checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义Checkbox复选框。这几款复选框样式很丰富,使用起来也比较方便。在线演示 源码下载2、HTML5/CSS3发光搜索表单 超酷CSS3表单之前我们分享过一款纯CSS3实现的发光登录表单,发光特效.. 阅读全文
摘要:
在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感。1、CSS3响应式面包屑菜单 菜单简洁大气之前我们分享过两款CSS3面包屑菜单,纯CSS3圆形面包屑菜单和CSS3扁平化面包屑菜单导航,效果都还不错。今天我们再分享一款响应式面包屑菜单,这款CSS3菜单外观设计非常简洁但又十分大气,我们可以在分步注册页面或者活动引导页面使用这款CSS3面包屑菜单。在线演示 源码下载2、HTML5爱心跳动动画 用技术勾引妹子在html5tricks网站上,我们.. 阅读全文