冒泡动画按钮的简单实现(使用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
冒泡动画按钮的简单实现(使用CSS3)的更多相关文章
- 纯CSS3冒泡动画按钮实现教程
这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...
- 一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- WPF界面设计技巧(3)—实现不规则动画按钮
原文:WPF界面设计技巧(3)-实现不规则动画按钮 发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作. 不规则按钮的做法实际上和先前我们做不规则窗体的 ...
随机推荐
- C++学习笔记32 断言函数
首先,让我们来看看百度百科上"断言函数"定义说明: 1定义fr=aladdin#" class="nslog:1019" title="编辑 ...
- JavaWeb显示器
本文研究的总结.欢迎转载,但请注明出处:http://blog.csdn.net/pistolove/article/details/44310967 A:监听器的定义 专门用于其它对象身上 ...
- [CLR via C#]7. 常量和字段
原文:[CLR via C#]7. 常量和字段 7.1 常量 常量(constant)是一个特殊的值,它是一个从不变化的值. 在定义常量时,它的值必须在编译时确定.确定之后,编译器将常量的值保存到程序 ...
- 微信公众平台接口,asp.net实现
原文:微信公众平台接口,asp.net实现 我为自己的笑话网开发了一个微信公众平台的接口,在这里分享给大家,希望能对朋友们有帮助,如果有什么地方写的不好,好请大家指点! 首先是要进行认证,认证的时候, ...
- MonkeyRunner源码分析之工作原理图-attach
花了点时间整理了下MonkeyRunner的工作原理图: Item Description Warning Author 天地会珠海分舵 转载请注明出处! Blog Address http://bl ...
- JS获取渲染后的样式
一般我们利用element.style.属性来获取CSS的样式,而此方法只能获取标签内的样式,无法获取头部或引入的样式,因此,而我们又需要获取其样式,则我们可以使用:(其中element为标签,pro ...
- C# 以嵌入到窗体的方式打开外部exe
using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; using S ...
- leetcode[67] Plus One
题目:对一个用vector存的数字进行加1,然后返回加1后的值. 一次就在oj上通过了. 就是进位加上当前位如果大于9,那就当前位等于0: 随后进位还为1的话就是在数组前面插入一个1: class S ...
- a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性
1. CSS方式 在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true”属性即可,但这个属性是IE私有的,Firefox是不认的. 加了hidefocus ...
- js实现tooltip动态提示效果(文字版)
页面中经常用到鼠标移动到一个元素上面显示提示的功能,最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div,比较麻烦. 针对上面个的需求,这边写了一个tooltip动态提示 ...