CSS3 transform之scale缩放|transition之过渡动画调整手记

想给学而行营销网图文列表中的图片,增加一点动态交互——别一动不动地躺尸,太平了!

网站图文列表

看过别家的网站,其中鼠标移到图片上,图片会适当地进行缩放,这种微妙的动态体验,给人的感觉是蛮好的。

哥知道这是css3可以实现的功能。试为之。

既然是鼠标移上去后再发生变化,那首先需在css文件中,针对图片的hover增加个样式,缩放比例为1.1。如下:

.index-list-tu li a img:hover {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}

怀着憧憬,查看变化。

结果:动态是有了,只是动作太迅猛,不平滑,感觉很突兀。就像以前用flash制作动画一样,缺少中间过渡(这个知识点,源于已经过世的flash)。

css3缩放动画

(没玩过动态的gif录屏,用ps制作了一个动画来模拟。)

看来没那么简单,还需要对图片对应的样式写上css3的transition(过渡)。如下红色为增加的transition部分:

.index-list-tu li a img {
width: 230px;
height: 145px;
border-radius:3px;
float: left;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}

如此追加了,这个针对图片的平滑的微动效就有了(可参见学而行营销网首页中的图文列表)。

关于CSS3 transform的更多知识方法,可以参考w3cschool提供的这个:CSS3 transform 属性 CSS3 过渡

另有发现一个小问题:就是缩放1.1倍后,其所占据的空间也增大了。这样也可以接受,但个人感觉最好是保持在原有的框框内,以保持整体的齐整性及美观。

CSS图片overflow

那就去找包围图片的那个div(<div class="imgarea fl">),在样式中为其加入overflow。css代码如下:

.notice .tab-pal .imgarea {
width: 28%;
position: relative;
display: inline-block;
overflow: hidden;
}

css是个神奇的东西,如同一个大宝库取之不尽用之不竭,从我从事网页制作工作接触css开始,一直以为css很简单,现在已经超过十五年过去了,我却发现:还有好多的css知识和技巧,我根本就未曾知晓。

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注