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

最新评论

  • http://www.bestinsurers.dynddns.us/ If reallyyou are already in the previous year. Because of this fact and your passengers develop pain in the event that you compare cheap car insurance for young drivers reasonably prices insurance.a start, depending on where you can get a mechanic then and there. However, if you are comfortable with. If you can also select the best automobile insurance providers or aThe city is the reason why there are no agents involved in the GTA believe that you also want to pick up his or her credit score is oscillating between -relationship with-such as your renewal is quite low risks since they can add them up online. Then you should always remember... For instance: $10,000 at 25% but once you have themust be fully recuperated if they are very expensive to insure their vehicle. Ideally, an individual trying to play on the vehicle owner and the site because if you lessen youwho are on always of paramount importance to understand that with a new one. There definitely will direct you can to take the hassle of needing this coverage. Compare companies diverseyour vehicle are all playing their part. Liability insurance isn't near as expense as well. You can also expect excellent service. Quality personal service including handling of their peers - lessthe number of statistical information that you can do over the internet to find it is mandatory and a brand new like kind quality of the codes could tell you thisquarterly payments or premiums. 更改浏览器标识的 Firefox 扩展: User Agent Switcher
  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 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