日期:2014-05-17  浏览次数:20490 次

CSS3实现图片动画效果
今天要介绍的 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);
}

如果要求仅应用于 的图片,则将选择器改为:
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,就介绍到这里,本文效果没有用全局控制,效果仅在本文有效,喜欢的朋友就直接扒源码吧。