学习笔记: 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 在这方面基本还是零吧。

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 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儘快普及開來就好了。

很炫的效果啊 🌈

学习了,很强大.

老肥同志,很喜欢你的博客。我自己的博客刚刚起步,不知可不可以跟你交换一下连接。
也欢迎你去我那里做客,给我指正。
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不对啊,应该是竖大拇指才对

👍

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

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

wow, cooooooooooooooooooooooooooooooool!

支持一次! 很有趣!

靠 这么认真做啥子咯

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

不好意思 不换链接

不错 学习了!

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

我这里 IE6 占总数的 40% 呢

哇哈哈
真的是很不错的文章 真的很不错 👍

很强大,动画效果组合起来快赶上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只是一味的跟随

CSS的功能真强大。

不错的技巧了,学习了

不错,学习了。

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

so cooooool

除了IE…

IE毒瘤啊

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

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

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

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

英国的印度洋属地… 😮

💖 啊,原来这里全写了.

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

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

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

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

太强大了 学习学习!

Very Cool! 👍

只可惜啊,兼容性太差了

文章很给力啊!

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

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

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

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

文章写的好详细

博客体验也超好 😀


  1. 09年9月6日CSS3 鼠标悬停图片动画效果 » 生活演播室 www.life-studio.cn/css-3-hover-animations.html
  2. 10年3月31日CSS3的动画 - [米随随] s5s5 www.misuisui.com/weblog/?p=2204
  3. 10年5月12日CSS3动画效果 www.crazyfrom.com/effects/css3-donghua.html
  4. 10年5月13日开张恭贺新禧 | 四乘六制造机 blog.4x6maker.com/%e6%89%80%e6%9c%89%e6%96%87%e7%ab%a0/%e5%bc%80%e5%bc%a0%e6%81%ad%e8%b4%ba%e6%96%b0%e7%a6%a7/
  5. 10年6月9日WebKit CSS3 动画基础 « 爱惜–爱熙 www.aixi.li/?p=35
  6. 11年3月26日CSS 文字阴影在网页设计中的应用 | 时光 xiwen32.info/archives/620
  7. 11年10月15日全新的评论区体验 | 人肉联播 h1ppy.com/archives/1332
  8. 11年11月17日11.17 css3&Xlong - 蝎紫の个人博客 www.zscorpio.com/?p=655
  9. 11年11月17日支持IE,firefox的CSS文字浮雕效果;css文字白色阴影  | 梦的河流前端开发 www.psdcool.com/?p=377
  10. 12年2月15日CSS3 WebKit 动画制作基础 | Library library.rigxin.info/?p=199