井井客

搜索

CSS3动画缩放scale整理

CSS3中新增的transition属性应该都有一定的了解,通过一个例子看看如何鼠标放上去缓慢缩小,移开后当前尺寸放大到原始值。

CSS3动画缩放scale整理

代码如下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>CSS3动画缩放scale举例</title>
<style type="text/css">
a img { margin:0; padding:0; border:0;}
.warp { display:block; background:#fff; margin:0 auto; overflow:hidden; padding:3px;  border:1px solid #ccc;}
.warp ,.warp img { width:150px; height:150px; }
.warp img {
	transform:scale(1);
	transition:transform 0.5s ease;
	-webkit-transform:scale(1);
	-webkit-transition:-webkit-transform 0.5s ease;
	-moz-transform:scale(1);
	-moz-transition:-moz-transform 0.5s ease;
	-o-transform:scale(1);
	-o-transition:-o-transform 0.5s ease;
}
.warp:hover img{
	transform:scale(0.95);
	transition:transform 0.5s ease;
	-webkit-transform:scale(0.95);
	-webkit-transition:-webkit-transform 0.5s ease;
	-moz-transform:scale(0.95);
	-moz-transition:-moz-transform 0.5s ease;
	-o-transform:scale(0.95);
	-o-transition:-moz-transform 0.5s ease;
}
</style>
</head>
<body>
<a href="javascript:void(0);" class="warp"><img src="http://www.jingjingke.com/res/img/ceshi.png" /></a>
</body>
</html>

要想鼠标移上去时图片缩小,移开时图片还原大小并且都带有scale动画的效果。
需要注意是要给它原始的状态和变化的状态同时定义transition scale才能达到上达动画效果。
很多粗心的童鞋忘记给原始的状态定义而导致鼠标移上去时带有CSS3动画,而移开时则没有效果。

当然,上面的代码,感觉好多好多,会觉得写代码的时候好麻烦呀~也有简便实用的,用transition:all,也能达到差不多的效果。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>CSS3动画缩放scale举例</title>
<style type="text/css">
a img { margin:0; padding:0; border:0;}
.warp { display:block; background:#fff; margin:0 auto; overflow:hidden; padding:3px;  border:1px solid #ccc;}
.warp ,.warp img { width:150px; height:150px; }
.warp:hover img{ width:140px; height:140px; padding:5px;}
.ex { transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;}
</style>
</head>
<body>
<a href="javascript:void(0);" class="warp"><img src="http://www.jingjingke.com/res/img/ceshi.png" class="ex"/></a>
</body>
</html>

定义一个样式(名字暂叫ex),定义transition all,然后让元素引用这个类。当然仅仅是这样是没有scale动画效果,还需要给元素:hover时的尺寸来个变化。

.warp:hover img{ width:140px; height:140px; padding:5px;}

这句也很重要,不要忽视它。不过好像有点点跑题了,来看看scale的设置。

scale(一个值),scale(两个值并用小写逗号分隔)是scale的两种情况
当scale中有两个值时,则第一个值代码横轴,第二个值代表竖轴。
例如scale(0.5,2)则表示横轴缩小至0.5倍,竖轴放大至2倍。

transition scale另外两个常用的则是scaleX(仅一个值),scaleY(仅一个值),看意思就知道分别是横轴和竖轴,就不特别赘述了。

最后两个比较冷门的scaleZ(仅一个值)和scale3d(三个值并且逗号分隔),scaleZ比较明白,scale3d的三个值对应的X轴,Y轴和Z轴。值得一说的是这两个在单独使用时是没有效果的,只有跟其它变形在一起使用才能看到效果。

不过比较遗憾的是新增的CSS3在现在看来兼容略差,仅在Ie9以上浏览器运行正常。相比这方面的兼容性,JQ则要好很多。

文章TAG:CSS3

作者:井井客原创来源:原创
本文标题:CSS3动画缩放scale整理
本文链接:/c/08102.html

上一篇:[转]CSS中文字体Unicode编码
下一篇:[转载]国外十个顶级的CSS3代码生成器

文章分类

相关阅读

随便看看