冒泡动画按钮的简单实现（使用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进行测试（请保证是在标准模式的测试结果），如有错误，请在留言中给出，我会立即修正，以免误导更多的童鞋们。

查看DEMO 下载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。

查看DEMO 下载DEMO

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。。。）。

查看DEMO 下载DEMO

原创文章，转载请注明出处：小天地，大世界[http://www.lyblog.net/]
文章地址：http://www.lyblog.net/?p=342