04 2014 档案

10个样式各异的CSS3 Loading加载动画
摘要：前几天我在园子里分享过2款很酷的CSS3 Loading加载动画，今天又有10个最新的Loading动画分享给大家，这些动画的样式都不一样，实现起来也并不难，你很容易把它们应用在项目中，先来看看效果图：你也可以在这里查看DEMO演示。下面我们来挑选几个比较典型的案例来分析一下代码。先来看看第一个案例... 阅读全文
posted @ 2014-04-29 10:28 html5tricks 阅读(4271) 评论(2) 推荐(4)
超可爱 纯CSS3实现的小猪、小老鼠、小牛
摘要：利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了，主要是利用CSS3可以让直线变成任意的曲线，于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享一下超级可爱的纯CSS3实现的小猪、小老鼠、小牛，先看靓照：我们可以在这里查看这三个小动物的DEMO演示。接下来我们逐个来贴出实现这... 阅读全文
posted @ 2014-04-28 10:47 html5tricks 阅读(5507) 评论(13) 推荐(8)
很酷的CSS3仿Facebook登录表单
摘要：今天看到一款很不错的CSS3登录表单，外观是仿Facebook的登录表单，还挺不错的，另外也支持简单的表单输入框验证。下图是表单的效果图：我们也可以在这里查看表单的DEMO演示。接下来我们来分析一下这款表单的源代码，首先是HTML代码： Facebook ... 阅读全文
posted @ 2014-04-27 11:50 html5tricks 阅读(2683) 评论(2) 推荐(2)
HTML5 Canvas火焰效果 像火球发射一样
摘要：Canvas是HTML5中非常重要而且有用的东西，我们可以在Canvas上绘制任意的元素，就像你制作Flash一样。今天我们就在Canvas上来制作一款火焰发射的效果。就像古代的火球炮一样，而且可以在浏览器边缘反弹，感觉会比较屌。来看看效果图：我们可以在这里查看火焰球的DEMO演示当然，我们要来分析... 阅读全文
posted @ 2014-04-24 10:29 html5tricks 阅读(7695) 评论(10) 推荐(21)
CSS3小清新下拉菜单 简易大方
摘要：之前有分享过几款CSS3菜单和jQuery菜单，像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽，这次要分享的这款相对比较简单，很适合用在用户的操作面板上。先来看看效果图：怎么样，无论从颜色还是结构都非常简单清新吧。你也可以到这里来看看这款下拉菜单的DEMO演示。接下来我们一... 阅读全文
posted @ 2014-04-22 10:44 html5tricks 阅读(1340) 评论(0) 推荐(2)
非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
摘要：新的一周刚刚开始，当我迷迷糊糊坐在办公桌前时，又不自主的去看了一些jQuery和HTML5的应用插件，今天我们来看一款非常酷的jQuery/HTML5图片滑块特效，这款插件的特点是图片上不错的弹性菜单，鼠标滑过菜单时可以弹出一张半透明的图片。先来看看效果图。我们可以在这里看到生动的DEMO演示。当然... 阅读全文
posted @ 2014-04-21 10:19 html5tricks 阅读(3557) 评论(1) 推荐(3)
非常酷的CSS3垂直下拉动画菜单
摘要：昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单，今天要分享一款相对绚丽的CSS3垂直下拉动画菜单，不过需要支持CSS3的浏览器才能有效果。下面是效果图，一起看看。我们也可以在这里查看菜单DEMO演示。下面来分析一下源代码，首先是HTML代码： ... 阅读全文
posted @ 2014-04-20 11:12 html5tricks 阅读(3531) 评论(1) 推荐(3)
jQuery实现一个淡入淡出下拉菜单 非常简易
摘要：前段时间我一直在向大家推荐CSS3和HTML5的东西，尽管看上去很炫，但也有不少网友抱怨兼容性问题，所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件。今天先分享一款利用jQuery实现的淡入淡出下拉菜单，看上去非常简单。先看看效果图。虽然简单，但看上去还是蛮不错的，不是吗？我们也可以... 阅读全文
posted @ 2014-04-19 10:30 html5tricks 阅读(3603) 评论(2) 推荐(1)
CSS3和jQuery实现的自定义美化Checkbox和Radiobox
摘要：现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，浏览器默认的样式确实是太丑了，而且更让人蛋疼的是各个浏览器的样式还不统一，考虑到现在越来越多的用户使用现代浏览器，所以我们可以大胆的用CSS3来自定义美化这些复选框和单选框，先来看看预览图：是不是比默... 阅读全文
posted @ 2014-04-18 10:10 html5tricks 阅读(4927) 评论(1) 推荐(4)
纯CSS3实现的图片滑块程序 效果非常酷
摘要：之前我们经常会看到很多利用jQuery实现的焦点图插件，种类太多了，今天我想给大家分享一款利用纯CSS3实现的图片滑块应用，完全是利用CSS3的相关特性，没有使用JS，个人觉得还是挺不错的，先来看看效果图：看上去挺不错的吧，简洁、清新、大气。当然我们也可以在这里查看DEMO演示。接下来我们一起来分析... 阅读全文
posted @ 2014-04-17 10:30 html5tricks 阅读(6011) 评论(7) 推荐(3)
利用纯CSS3实现超立体的3D图片侧翻倾斜效果
摘要：上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。另外你也可以在这里查看DEMO演示，鼠标滑过图片时会出现这样的... 阅读全文
posted @ 2014-04-16 13:54 html5tricks 阅读(5189) 评论(4) 推荐(4)
2款不同样式的CSS3 Loading加载动画 附源码
摘要：我们经常看到的Loading加载很多都是转圈圈的那种，今天我们来换一种有创意的CSS3 Loading加载动画，一种是声波形状的动画，另一种是折线弯曲的动画，它们实现起来也非常简单，先来看看效果图：看起来还挺特别的吧。。另外你也可以在这里看到这个Loading动画的DEMO演示接下来我们来看看如何用... 阅读全文
posted @ 2014-04-15 10:18 html5tricks 阅读(4075) 评论(3) 推荐(6)
CSS3实现Tooltip提示框飞入飞出动画
摘要：我们见过很多利用背景图片制作的Tooltip提示框，但是缺点是扩展比较麻烦，要经常改动图片。还有就是利用多层CSS的叠加实现，但是效果比较生硬，外观不怎么好看。今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框，提示框伴有飞入飞出的动画效果。先来看看效果图。看上去还简单吧，其实实... 阅读全文
posted @ 2014-04-14 12:30 html5tricks 阅读(7503) 评论(5) 推荐(3)
用CSS3制作很特别的波浪形菜单
摘要：网页菜单我们见过很多，各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单，它的外形是波浪形的，弯弯曲曲，结合背景，看上去还挺不错的，下面看下一效果图。我想说可能菜单并不是很实用，但是很有创意，而且也方便我们学习CSS3。当然，你可以到这里查看DEMO演示。接下来我们来对这款波浪形菜单的源代码简单分析一下。HTML代码的结构非常简单： ☁ ☀ ☃ ☂ ❆ ☾ 然后是CSS代码，这里我们对菜单项进行绝对定位.b-menu li { overflow: hidden; position: absolute; width: 12em; h... 阅读全文
posted @ 2014-04-12 11:47 html5tricks 阅读(1932) 评论(2) 推荐(1)
炫酷的CSS3发光搜索表单，附演示和源码
摘要：昨天在国外的论坛上逛的时候，看到一篇帖子是求助如何利用CSS3实现发光效果的，网友回复中有一个推荐了一款CSS3发光搜索表单，利用CSS3的动画属性，设置0%和100%时的颜色样式，让其渐变，再配合有明显对比的背景，就能模拟出发光的效果了，我把那个CSS3发光表单下载了下来，先来看一下效果图：图上的搜索框在被激活的时候会出现闪闪发光的特效。我们可以在这里查看CSS3发光搜索表单的DEMO演示。下面我们来一起看看源代码。HTML代码非常简单，一个文本框和一个提交按钮： Search然后重点就是CSS3代码了，首... 阅读全文
posted @ 2014-04-11 10:24 html5tricks 阅读(5890) 评论(12) 推荐(7)
超赞的CSS3进度条 可以随进度显示不同颜色
摘要：现在的WEB已经不是以前的WEB了，传输更大的数据量，有着更加复杂的计算，这就需要利用进度条来提高用户体验，必要时可以让用户耐心等待，不至于因操作卡了而关掉你的网页。前几天我在网上看到一款和一般进度条不太一样的玩意，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。一看进度条外观，还不错吧。同时，我们也可以在这里看到进度条的DEMO演示接下来我们来分析一下这款HTML5进度条的实现源码，篇幅有限，我们只挑核心的代码来说。HTML代码很简单，构造一个进度条容器和数字百分比容器： 0 首先我们来对进度条的容器进行样式渲染，利用.. 阅读全文
posted @ 2014-04-10 09:45 html5tricks 阅读(17621) 评论(11) 推荐(9)
创意HTML5文字特效 类似翻页的效果
摘要：之前在网上看到一款比较有新意的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接下来是... 阅读全文
posted @ 2014-04-09 10:48 html5tricks 阅读(7582) 评论(9) 推荐(5)
干货分享 9款精挑细选的HTML5应用
摘要：对于前端开发者来说，分享一些优秀的HTML5应用可以直接拿来用，更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用，个个都是干货。1、HTML5/CSS3滑块动画菜单 图标动画很酷CSS3菜单我们之前已经分享很多了，有3D菜单、下拉菜单、Tab菜单等，具体大家可以移步至CSS3菜单栏目下查找。今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷，鼠标滑过菜单项时会有一个漂亮的遮罩移动过来，并且这款动画菜单还有非常酷的图标，菜单整体效果很大气。在线演示 源码下载2、HTML5 Canvas头发飘逸动画 很酷的HTML5动画HTML5 Canvas动画非常炫酷，很多.. 阅读全文
posted @ 2014-04-09 09:59 html5tricks 阅读(882) 评论(1) 推荐(2)
8款唯美设计的HTML5/CSS3应用
摘要：清明小长假结束了，小编继续为各位分享HTML5和CSS3相关的资源和代码，这次我们把最新收集8款设计精美的HTML5/CSS3应用分享给大家，欢迎收藏分享。1、CSS3漂亮的自定义Checkbox复选框 9款迷人样式之前我们分享过一款非常不错的CSS3自定义Checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义Checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。在线演示 源码下载2、HTML5/CSS3发光搜索表单 超酷CSS3表单之前我们分享过一款纯CSS3实现的发光登录表单，发光特效.. 阅读全文
posted @ 2014-04-08 10:28 html5tricks 阅读(1106) 评论(0) 推荐(1)
绝对震撼 10个实用的jQuery/HTML5插件
摘要：在HTML5的世界里，我们见证了无数的特效奇迹，但很多特效我们很难在网页中应用，今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件，希望这些项目在应用的过程中也能给你带来设计灵感。1、CSS3响应式面包屑菜单 菜单简洁大气之前我们分享过两款CSS3面包屑菜单，纯CSS3圆形面包屑菜单和CSS3扁平化面包屑菜单导航，效果都还不错。今天我们再分享一款响应式面包屑菜单，这款CSS3菜单外观设计非常简洁但又十分大气，我们可以在分步注册页面或者活动引导页面使用这款CSS3面包屑菜单。在线演示 源码下载2、HTML5爱心跳动动画 用技术勾引妹子在html5tricks网站上，我们.. 阅读全文
posted @ 2014-04-04 10:23 html5tricks 阅读(1477) 评论(0) 推荐(0)
精挑细选 8款HTML5/jQuery应用助网站走向高上大
摘要：在WEB3.0的时代，我们的网站不仅要实现实用价值，更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架，结合目前最新的HTML5技术，我们可以将自己的网站脱胎换骨，立马走向高上大，至少在前端页面上。1、HTML5仿Chrome样式控制滑杆动画随着浏览器技术的发展，滑杆控制器在网页上应用越来越广泛。今天要分享一款HTML5的滑杆控制器，这个滑杆动画是放Chrome样式的，不仅外观非常漂亮，而且在数据初始化的时候还带有滑动动画特效，我们可以将此插件应用在数据更新、投票等系统中去。在线演示 源码下载2、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单之前我们分享过很多HTML5.. 阅读全文
posted @ 2014-04-03 10:58 html5tricks 阅读(781) 评论(0) 推荐(0)
大爱HTML5 9款超炫HTML5最新动画源码
摘要：我们分享过很多漂亮的HTML5动画，包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码，一起来看看。1、HTML5可爱的404页面动画 很逗的机器人很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。在线演示 源码下载2、HTML5/CSS3鼠标滑过抖动图标 非常可爱这是一款简单的利用CSS3实现的图标抖动特效，首先.. 阅读全文
posted @ 2014-04-02 09:23 html5tricks 阅读(735) 评论(0) 推荐(0)
大饱眼福 7款类型各异的CSS3实用菜单
摘要：在网站上应用一款具有表现力和用户体验的网页菜单非常重要，如果你的网站很现代，那么请利用HTML5和CSS3来完成菜单功能，因为这会让你的网站变得非常有活力。下面分享的7款类型各异的CSS3实用菜单将会给你一些设计灵感，欢迎收藏。1、清新小图标的HTML5/CSS3侧边栏菜单之前我们分享过几款CSS3侧边栏菜单，像CSS3侧边栏菜单 带可爱的小图标菜单和CSS3侧边栏手风琴菜单，都非常不错。今天我们要分享的这款CSS3侧边栏菜单和之前这款菜单类似，也带有漂亮可爱的小图标，鼠标滑过菜单项时背景会出现淡入淡出的效果。在线演示 源码下载2、3D侧躺CSS3菜单 3D展开子菜单之前我们分享过一款HT.. 阅读全文
posted @ 2014-04-01 11:07 html5tricks 阅读(797) 评论(0) 推荐(0)