CSS3 鼠标悬停图片动画效果

发布于：电脑网络, 精品推荐, 转来载去 1,364 次践踏

对于 WordPress 我抱着生命不止，折腾不息的精神，从 WordPress 提速、数据库优化、缓存、静态、SEO、美化、CSS、JS、PHP……关于 WordPress 一切的一切我都在不停地学习着折腾着。看到好的效果或者方法我都忍不住要拿自己的网站做小白鼠，然后再把成功的经验点滴写下来分享给更多和我一样喜欢 WordPress 的童鞋们。


Life Studio
今天要介绍的 WordPress 效果是用 CSS3 实现鼠标悬停动画，这是从老肥博客那里挖来的，是个专业级玩家，童鞋可以自行前往淘淘宝，会有更多发现的。当然，这个 CSS3 悬停动画效果并不只是适用在 WordPress 下的，我只是顺手拿 WordPress 举个例子。并外可惜的是 IE 浏览器还停留在 CSS2.1 的级别，暂时与这个效果无缘，所以只有用 Firefox 或者 Chrome 浏览器的读者朋友才能欣赏到本文中用 CSS3 实现的鼠标悬停动画效果。

将鼠标悬停到左侧图片上，你就会发现这个效果的奇妙之处了，当然这只是鼠标悬停动画效果的一个例子。如果将以下代码应用到全局 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);


Life Studio
上面的例子仅仅应用了 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%(左下角)：
Life Studio


Life Studio

transition: 过程动画设定

兼容浏览器：Chrome 2.0、Safari 3.1

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

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

OK，就介绍到这里，本文效果没有用全局控制，效果仅在本文有效，喜欢的朋友就直接扒源码吧。

本文转自：http://fisio.cn/css-3-hover-animations.html

  10. Pingback: CSS3动画技术 | 闲云野鹤情侣博客

  13. 这效果前两天才看到的。。觉得很好奇。。可不知道怎么弄。
    想不到今天在这里淘到了。。呵呵。。刮走了。 。 :lol: