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

相关文章

最新文章

更多 »

热门标签

Firefox Gmail Google Greasemonkey WordPress 创意 博客 地图 手机 扩展 美化 设计 黑莓

最新评论

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

随机文章


发表您的评论

评论将回复给

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

目前有 100 条评论

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

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

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

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

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

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

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

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

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




还有 10 条 pingbacks 从其它网站引用了本文