学习笔记: CSS3 鼠标悬停动画

pbtweet 里面那个漂亮的贴图徽章启发,我搜索了一些相关资料,将如何用 CSS 实现鼠标悬停动画效果的方法整理成本文。目前,能正确显示这些非正式 CSS 属性的浏览器还非常有限,不过可以确信的是,不能显示动画的浏览器不会受到不良影响,那么就让优秀的浏览器物尽其用吧。查看示例请用 Chrome, Safari 访问 本文,其它浏览器可能不能正常显示。

上图是一个鼠标悬停动画的例子,如果将以下代码应用到全局 CSS 中,则所有带链接的图片都会有如上图动画:

a img {
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-out;
}
 
a:hover img {
    opacity: 1;
    -moz-transform: scale(1.05) rotate(2deg);
    -webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 class="logo" 的图片,则将选择器改为:

a img.logo {...}
a:hover img.logo {...}

如果要求应用于 id="footer" 的 div 下所有图片,则将选择器改为:

#footer a img {...}
#footer a:hover img {...}

到这里,所有的工作都完成了,挺简单吧?下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);



上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法,想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中,X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子,左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):

transition: 过程动画设定

兼容浏览器: Chrome 2.0, Safari 3.1

-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性,它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画,包括 transform, opacity; 后面两项是时间和时间轴曲线,可以有如下赋值:

default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »

以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大,而且上面的 transform 是可以多重叠加的,配合 transition, 能做些什么大家想象一下吧!

opacity: 不透明度

兼容浏览器: 除了 IE

这是一个较为广泛支持的属性,前面早已没有了私有前缀(-moz, -webkit). 使用也很简单,让正常状态的图片稍微透明显示,鼠标悬停的时候恢复不透明,更加醒目。它同样可以在时间轴上受 transition 控制,试试看这个示例。

text-shadow: 文字阴影

兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1

text-shadow: 0px 1px 3px black;

以上赋值分别代表 X轴偏移,Y轴偏移,阴影扩散尺寸,颜色。应用到按钮、标题等处有很好的浮雕效果,同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。

结语

  • 限于篇幅,本文示例所用的 CSS 不明文列出,有兴趣可以查看页面源代码,就嵌在正文中。
  • 目前 CSS3 还在草案阶段,很多属性还有私有属性前缀,能兼容新属性的浏览器在用户比例上也还是少数。话说回来,谁指望 IE Trident? 屁股都要笑掉。
  • Gecko 真的已经落后 WebKit 好多了,CSS, JS, 而且还没算上 WebKit 在 iPhone, Android 等移动平台的成就。Gecko 在这方面基本还是零吧。

最新评论

  • 邹有为 我选择做鼻御灵代理三大理由: 一、鼻御灵拥有庞大的市场 中国作为一个发展中国家,工业是也重点发展的领域。但是在中国,大部分工业城市,空气污染严重导致雾霾等有害物质正在侵害我们的身体。全国15亿人口鼻炎了患者占60%以上,鼻炎的痛苦我深有体会。 二、鼻御灵效果明显祖传秘方鼻御灵具有见效快、效果佳、疗程短、少复发等多种优势,其主要原理在于清浊祛脓、涤荡污秽、打通气道,使呼吸畅通;补足肺气、清阳上达、扶正祛邪,标本皆修。只需用棉签涂抹鼻孔,即能缓解鼻炎症状;芳香通窍,穿透鼻腔内病痂,药力直达病根。开结散气、去腐生肌,彻底恢复鼻腔免疫力和自洁自愈功能! 三、做鼻御灵代理利润丰厚 我做了这么多年的微商,这是唯一一款只需要低投入,拥有零风险、回报高,将利润最大化的产品和产品体系, 和服务的专业度。一手货源微信号:QM860890237 打造完美的 ajax 版 Google 自定义搜索
  • 邹有为 祖传鼻炎药-鼻御灵适用于过敏性鼻炎、综合性鼻炎、鼻窦炎、塞鼻窦炎、上额窦炎、干燥性鼻炎、萎缩性鼻炎、急慢性鼻炎等。可消除鼻痒、打喷嚏、流鼻涕、鼻塞、头痛、胸闷等。 很多人都不知道偏方是什么?偏方就是民间流传几百年外人都不知道的就是偏方,偏方治百病大家都知道,其经过百年流传下来至今手法已经十分娴熟,无数患者服用后亲身反馈效果和安全方面肯定有保障。我自己是10多年过敏性鼻炎患者,在深圳动手术花了七千多元没有治疗好,用鼻御灵一疗程完全治疗好不复发,结果证明祖传鼻炎药-鼻御灵针对各类过敏性鼻炎,慢性鼻炎,鼻窦炎,鼻甲肥大等有奇效,5岁以上小孩都能服用,不含任何激素,无任何副作用!微信号:QM860890237,加微信可成本价送试用装体验一个礼拜再买正装。 打造完美的 ajax 版 Google 自定义搜索
  • 邹有为 鼻御灵通提供一手货源+技术+售后+一件代发,批发零售。我的药是一个祖传的土方子,无副作用,无激素,不刺激,不依赖,外用的,用棉签抹在鼻子里面的,每天坚持抹三到五次,一个星期见效。一手货源微信号:QM860890237 打造完美的 ajax 版 Google 自定义搜索
  • Josie I feel so much happier now I unnrdstaed all this. Thanks! 回味一个老视频: Numa Numa 之 蚂蚁呀喜~蚂蚁呀豁~
  • Sanne That's a weth-lhouglt-out answer to a challenging question CSS 文字阴影在网页设计中的应用

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 100 条评论

  

好有趣~ 学习鸟

很强大,动画效果组合起来快赶上flash了
很chrome很爽,真希望ie能快点消失呀

指望 gecko, webkit 就好了,IE没啥好指望的…

真的很flash的效果。

赞!

如果是图片导航,用这效果也很酷的。

ubuntu9.04+firefox3.6.以上效果都能够显示

动画过程用的是 -webkit-transition, firefox 应该不能识别吧。不过我也只试过 3.5, 不知道 3.6 怎么样

换成chrome体验了一下,果然强大..

在firefox下只能显示首位两帧.

但是在动画过程中出现了图片的失真,对于图片还是有所要求的

三个浏览器都会对图片的缩放进行像素重新计算的,不过放大总会有模糊啦。只是演示,我才放那么大的比例,正常的 1.05 就差不多了

Firefox下的渐变效果还是不太好.

firefox 最新的 minefield 也没有支持 -moz-transition 或者 transition, 现在连 opera 都支持了。。。

果然很強大啊,CSS3儘快普及開來就好了。

很炫的效果啊 :rainbow:

学习了,很强大.

老肥同志,很喜欢你的博客。我自己的博客刚刚起步,不知可不可以跟你交换一下连接。
也欢迎你去我那里做客,给我指正。
http://berrycorner.blogbus.com

不好意思,不换链接

效果真的太棒了,真希望赶快标准化起来!

感觉像是 svg

而且被搬到网页上了

看起来Gecko需要改变一下了
Fennec的难产应该已经说明了问题

太帅鸟...

收藏,学习!

实在是太强大了。等到chrome的扩展出来了,firefox真的要被抛弃了。

确实不错! 收藏下!

你博客的题头图太拽了!尽显男儿本色!

是女生的玉指吧?

ps.. 图片来源 http://bit.ly/18x95k

我就感觉,mozilla 干脆转 webkit 得了。不过这样一来 webkit 少了对手,怕会不思进取。。。

虽然这样也不错,但没有可操作性,因为 firefox 连界面 XUL 都是完全依赖 gecko 的,换核心就什么都要重头来过了…XD

效果太赞了 :p
另外题头图太NB了

前来围观不和谐header

围观Header.

围观 header ,另外6不对啊,应该是竖大拇指才对

:nice:

呃,这个手势是有很多种版本的吧,我的选材是 http://bit.ly/18x95k

从百度跳到你的BLOG,非常不错,而且是老乡,交换个链接了
web:www.iedoo.cn
name:iedoo's home

wow, cooooooooooooooooooooooooooooooool!

支持一次! 很有趣!

靠 这么认真做啥子咯

博主您的博客挺不错的,很喜欢。
可否做个链接?
已经添加好了您的链接
希望能通过您的审核!
博客名称:乐风网
博客域名:http://www.ya74.cn/

不好意思 不换链接

不错 学习了!

ie6已经快没有了,不费神去考虑6了

我这里 IE6 占总数的 40% 呢

强悍,学习。

哇哈哈
真的是很不错的文章 真的很不错 :nice:

很强大,动画效果组合起来快赶上flash了
很chrome很爽

😮 😆 IE没啥好指望的…

很漂亮的动画..我不会做 😮

😀 你好呀老肥
这次想向你请教一下FF皮肤的内置fission样式的修改的问题.
手里有一个联系不到的高人修改的一个fission样式的皮肤.皮肤是http://www.takebacktheweb.org/这里的,但是想自己修改一下,不知道从何下手呢,不知道老肥能不能详细的说说

如何找插件本地目录知道在哪里吗?找到插件,解压 .jar, 修改里面的资源吧

这个我到是知道的,但是关键就是能控制fssion样式的CSS了

css 也在 .jar 里面…

恩,就是不知道是哪个在控制呢

不错 学习了

太强大了 太强了!!

真的很不错,兄弟,技巧非常棒

不知道z blog 能否使用 😀

和博客程序没关系,这只是 html, css, 也就是说适用于所有的网页 😀

😀

真想 Chrome for Mac 快快来啊!这 Safari 更新真是一次不如一次了。现在一开就猛转硬盘…唉…

好玩...太好玩了...要试试! :p

Webkit一直是很好的实践者,Gecko只是一味的跟随

来学习下 :p

CSS的功能真强大。

不错的技巧了,学习了

不错,学习了。

世博会网站就太需要美化下了。

so cooooool

除了IE...

IE毒瘤啊

CSS动画效果多少有点生硬,比Flash是比不上,比JS也难...

谢谢了,正好找到我用的。

😀 效果非常不错..应用了一个

你的这个域名是哪个地区的?

英国的印度洋属地… 😮

:love: 啊,原来这里全写了.

如何实现旋转后的图片浮在上层

如果被其它图片盖住了的话,尝试加入 z-index 吧

:nice: 呵呵,博主的css写的有深度!订阅了!

原来是这么搞的。。。。 (* ̄- ̄)y

太强大了 学习学习!

Very Cool! :nice:

只可惜啊,兼容性太差了

文章很给力啊!

看上了http://habit6.com这个博客上的评论的那个呼吸特效 ,想学习下,怎么就谷歌到你这来了,虽然还是没有弄明白是怎么弄得,但也觉得不虚此行啦,太漂亮啦 你的这个 一直在这晃悠 嘿嘿 :nice: 顺便 博主牛叉惨了 佩服佩服

好文章啊!!!!!!!!!!!!!!!!!!

唉,为啥楼主钟爱私有属性?

新入无线前端,很好很强大

文章写的好详细

博客体验也超好 😀


有 10 篇其他博客的文章引用了本文

  1. 09年9月6日CSS3 鼠标悬停图片动画效果 » 生活演播室
  2. 10年3月31日CSS3的动画 - [米随随] s5s5
  3. 10年5月12日CSS3动画效果
  4. 10年5月13日开张恭贺新禧 | 四乘六制造机
  5. 10年6月9日WebKit CSS3 动画基础 « 爱惜–爱熙
  6. 11年3月26日CSS 文字阴影在网页设计中的应用 | 时光
  7. 11年10月15日全新的评论区体验 | 人肉联播
  8. 11年11月17日11.17 css3&Xlong - 蝎紫の个人博客
  9. 11年11月17日支持IE,firefox的CSS文字浮雕效果;css文字白色阴影  | 梦的河流前端开发
  10. 12年2月15日CSS3 WebKit 动画制作基础 | Library