冒泡动画按钮的简单实现（使用CSS3）
冒泡动画按钮的简单实现（使用CSS3）
原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ，基本原理是利用了 hover，background-position 和 transition 三个属性。
原文给出的实现细致完整，但是对于理解关键的实现原理不便，我按照原文的思路给出一种简单实现，效果可以可见http://jsbin.com/UbIJUfA/1/ 。
代码如下（这段代码只能在Chromium类浏览器工作）：
<!DOCTYPE html> <html> <style> .btn { padding: 10px 20px; background-color: rgb(0, 162, 255); background-image: url("http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/buttons/button_bg.png"); background-position:bottom left; -webkit-transition: background-position 1s; } .btn:hover{ background-position:top left; } </style> <p><a href="javascript:;" class="btn">Here!</a></p> </html>
实现原理简单说来：
首先是使用hover伪类和background-position，使得按钮在鼠标滑入和滑出时按钮背景产生“变化”，然后是用transition属性把这个变化“放慢”从而产生“动画”。hover常被用来产生对鼠标滑过的感应动画效果。在本例中，background-image是一张尺寸比较大的带气泡图案的图片，hover的作用是设定background-position属性，让鼠标滑入时背景图片的显示区域从底部（bottom）移动到顶部（top），滑出时相反。由于hover对属性的修改是瞬间完成的，所以需要配合transition的“减速”作用（当然实际情况可能是浏览器做为此生成了补间动画）。
在原文中，作者还设置了其他属性使得按钮更美观和具有普适性，还有些代码是为了兼容多种浏览器，因此其余部分代码也是值得学习研究一番的。
如果你是一位资深的前端工程师，你可以飘过。如若你总是因为浏览器兼容性问题而苦恼，那么你可以看一下以下整理的内容，并根据DEMO进行测试，或许会有一定的收获。
CSS HACK 汇总
IE CSS HACK
在所有浏览器中，对标准支持最乱的是IE，更新最慢的也是IE，用户群（国内）最多的仍数IE。泥吗，在IE上做开发完全就是程序员折腾程序员。抱怨还是放一边吧！下面切入正题！
IE中的条件注释
IE中的条件注释可以很容易的检测到早期版本的Windows Internet Explorer。条件注释可以很容易的把IE和其它非IE浏览器区分开来，并且可以针对IE的不同版本来进行书写特定的样式和HTML结构。不过要特别注意：在IE 10+，标准模式下不再支持条件注释（解决方案基于功能检测）。
条件注释语法及应用
| 注释类型 | 语法或可能值 |
|---|---|
| 标准的HTML注释 | <!-- 注释内容 --> |
| 下层隐藏 | <!--[if expression]> 相应代码 <![endif]--> |
| 下层显示 | <![if expression]> 相应代码 <![endif]> |
下面是其中的表达式可以对以下几项（IE版本，操作系统版本）进行判断
| 项 | 实例 | 作用 |
|---|---|---|
| ! | [if !IE] | 非操作。对最后匹配结果进行取反。实例表示非IE浏览器。 |
| lt | [if lt IE 5.5] | lt是less than的缩写，即判断返回值小于时执行。实例表示在所有版本低于IE 5.5的IE中执行。 |
| lte | [if lte IE 6] | lte是less than or equal的缩写，即判断返回值要小于或等于时执行。 |
| gt | [if gt IE 5] | gt是greater than的缩写，即判断返回值要大于时才执行。 |
| gte | [if gte IE 7] | gte是greater than or equal的缩写，即判断返回值要大于或等于时才执行。 |
| ( ) | [if !(IE 7)] | 子表达式，用来构建更加复杂的表达式。 |
| & | [if (gt IE 5)&(lt IE 7)] | 取与操作。对前后两个表达式的值取与。 |
| | | [if (IE 6)|(IE 7)] | 或操作。对前后两个表达式取或操作。 |
下面就来几个例子：
1、只为IE6指定样式的方法（为IE9以上的版本不可以采用条件注释）
<!--[if IE 6]>
<style type="text/css">
#mine {
width:300px;
height:200px;
}
</style>
<![endif]-->
2、为IE 8、9指定样式
<!--[if (IE 8) | (IE 9)]>
<style type="text/css">
#mine {
width:300px;
height:200px;
}
</style>
<![endif]-->
注意事项
- 特别注意，IE条件句在IE 10标准模式下不再支持。
- IE的条件判断语句仅适用于IE浏览器 ，并且位置必须放在相应的HTML文件中，在CSS文件或其它文件将会引起错误。
- 判断浏览器版本都是一个粗的判断，你可以指定一个4位数的小数进行判断。如：
[if IE 5.5000] - 对于判断语句，并不是完全根据浏览器版本来进行判断，而是根据IE浏览器的渲染版本进行判断的。如：
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"/>，代码就是让所有版本高于7的IE都以IE的模式进行渲染，故就会被判断为IE 7。
CSS 解析器 Hacks 区分 IE
虽然IE的条件注释语句在某种程序上为我们提供了方便，但是却很难让我们把样式放置到同一个CSS文件中。。。那么下面，我们就来了解一下IE中CSS解释器HACK对各版本的支持情况。（以下表格中的检测结果是基于IE浏览器的标准渲染模式，若有错误，请留言指出，我会立即更正。）
| 标识 | IE版本 | 示例 | ||||
|---|---|---|---|---|---|---|
| IE 6 | IE 7 | IE 8 | IE 9 | IE 10 | ||
| _ | 支持 | 不支持 | 不支持 | 不支持 | 不支持 | {_display:none;} |
| + | 支持 | 支持 | 不支持 | 不支持 | 不支持 | {+display:none;} |
| * | 支持 | 支持 | 不支持 | 不支持 | 不支持 | {*display:none;} |
| # | 支持 | 支持 | 不支持 | 不支持 | 不支持 | {#display:none;} |
| *- | 支持 | 不支持 | 不支持 | 不支持 | 不支持 | {*-display:none;} |
| *+ | 不支持 | 支持 | 不支持 | 不支持 | 不支持 | {*+display:none;} |
| \0 | 不支持 | 不支持 | 支持 | 支持 | 支持 | {background-color:red\0;} |
| \0/ | 不支持 | 不支持 | 支持 | 不支持 | 不支持 | {background-color:red\0/;} |
| \9 | 支持 | 支持 | 支持 | 支持 | 支持 | {background-color:red\9;} |
| \9\0 | 不支持 | 不支持 | 支持 | 支持 | 支持 | {background-color:red\9\0;} |
| \9\0/ | 不支持 | 不支持 | 支持 | 不支持 | 不支持 | {background-color:red\9\0/;} |
| -ms- | 不支持 | 不支持 | 支持 | 支持 | 支持 | {-ms-transform:rotate(-3deg);} |
注意：以上最后一个-ms-前缀是专门用来针对IE8+浏览器中私用属性，或CSS 3中尚未成为标准的属性前缀。用于HACK中，有时可能不会起作用。比如：-ms-height:100px;
下面是对以上各种IE版本做的CSS HACKS，你可以点击以下的DEMO进行测试（请保证是在标准模式的测试结果），如有错误，请在留言中给出，我会立即修正，以免误导更多的童鞋们。
IE中选择器技巧
在IE浏览器中，除了以上前缀的方式之外，还可以通过选择器的技巧来实现区分浏览器的样式。我们知道，IE是在不断的支持CSS 中的高级选择器，而低版本对于高版本而言，支持的选择器种类也就少些，于是我们就可以利用IE对选择器支持程度的不同而为不同版本指定样式。不仅如些，IE中还有一些选择器的特殊的标识，下面将归在一起，并写出了支持情况。
| 选择器 | IE版本 | 示例 | ||||
|---|---|---|---|---|---|---|
| IE 6 | IE 7 | IE 8 | IE 9 | IE 10 | ||
| > | 不支持 | 支持 | 支持 | 支持 | 支持 | html < body #mine |
| * | 支持 | 不支持 | 不支持 | 不支持 | 不支持 | *html #mine |
| *+ | 不支持 | 支持 | 不支持 | 不支持 | 不支持 | *+html #mine |
| :root | 不支持 | 不支持 | 不支持 | 支持 | 支持 | :root #mine |
说明：对于以上示例中选择器部分差异，未整理全。另外特别说明一下像*这样的选择器前缀不一定只能放在html的前面，你完全可以这样来用*#mine。
IE中CSS HACK小结
- IE中，IE8+浏览器都有一个兼容模式，在此模式下，浏览器是以IE 7的标准来渲染页面，此时在IE 7下的CSS HACK也就会起作用。
- 结合着CSS样式的HACK和代码的顺序，也会产生不同的结果。一般原则是：由面到点。（即：先写所有浏览器都支持的，然后再为特定浏览器书写样式，以达到覆盖先前的样式的目的）。
#mine { background-color:pink; /*针对标准浏览器*/ background-color:#ccc\9; /*针对所有IE，但通过后续代码，此样式中能IE 11/10/9有效*/ bckground-color:yellow\0/; /*IE 8专用HACK*/ *background-color:aliceblue; /*IE 6,7，最终作用于IE 7*/ _background-color:greenyellow; /*IE 6专用样式*/ }通过以上：你可以看到很难把IE 9/10分别开来，但是方法还是有的（在HTML中作一下文章），代码如下：
<!DOCTYPE html> <!--[if IE 6]> <html id="ie6" lang="zh-CN"> <![endif]--> <!--[if IE 7]> <html id="ie7" lang="zh-CN"> <![endif]--> <!--[if IE 8]> <html id="ie8" lang="zh-CN"> <![endif]--> <!--[if IE 9]><!--> <html id="ie9" lang="zh-CN"> <!--<![endif]--> <head> <meta charset="UTF-8" /> <title>小天地，大世界</title> <style type="text/css"> #mine { width:200px; height:200px; border:1px solid blue; background-color:#ccc; } #ie6 #mine { background-color:red; } #ie7 #mine { background-color:#FFFFFF; } #ie8 #mine { background-color:yellowgreen; } #ie9 #mine { background-color:peru; } </style> </head> <body> <div id="mine"></div> </body> </html>一般来讲IE 9+对于CSS标准的支持已经很不错了，只要你的代码符合标准，一般是不会出现什么问题的。所以本文并未对ie 9/10/11的hack作非常深入的研究。
- 对于兼容性问题，其它还可以通过JavaScript来实现浏览器检测，从而根据浏览器版本一应用不同的CSS样式。（个人觉得，些法没有必要，故不作研究。）
- 另外，关于很多人利用IE 6不能识别
!important来分开IE6（个人感觉这个方法实在不妥，故在以上并未给出）。 - 如果你是一个很在意w3c的文档标准校验的话，强烈建议你研究一下IE中各版本对CSS 选择器支持情况。
其它标准浏览器中常见的HACK
对于比较符合标准的浏览器中，IE10+可以放进去的。我们肯定是很少或者是没有在其上用过hack，因为没有必要。话不能这么绝对，因为浏览器开发厂商不是长着一个脑袋。所以小小研究一下还是有必要的。下面主要是结合CSS MEDIA QUERIES支持情况的不同，从而为不同浏览器指定样式（如果你对CSS 3 MEDIA QUERIES不了解，你可以参看：CSS 3 Media Queries 学习小结)。
为IE 10/11指定样式
IE 10+的浏览器是支持 @media –ms-hight-contrast媒体查询，同时也是支持-ms-hight-constrast这个属性，故可以通过此来把IE 9－区别开来，代码如下：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE 10 + 样式 */
}
同理的方法如下：
<script type="text/javascript">
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10 ie11";
}
</script>
为webkit浏览器指定样式
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* style for Chrome,safari...*/
}
为Opera浏览器指定样式
前不久，Opera好像把内核转向webkit了，所以以上代码可能对后来的Opera也是生效的。
doesnotexist:-o-prefocus, #mine1 {
/*style for Opera 12+*/
}
为FireFox浏览器指定样式
费话少说，直接贴上代码吧！
@-moz-document url-prefix() {
#mine {
/*style for ff*/
}
}
小结语
- 对于比较符合标准的浏览器，hack无须的，故不做详解。
- 针对网上通过前缀的方法实现跨浏览器样式（如：
-webkit-、-o-、-ms-），感觉不好，并且在浏览器上也不太好使，所以没有介绍。
小结
在文章的最后，也就缀述这些HACK了，还是简洁了当，给个DEMO吧（此DEMO是可以区分IE 6,7,8,9,10、Opera、Chrome。。。）。
原创文章，转载请注明出处：小天地，大世界[http://www.lyblog.net/]
文章地址：http://www.lyblog.net/?p=342