<form id="ivb0m"><span id="ivb0m"><track id="ivb0m"></track></span></form>

  • <nav id="ivb0m"></nav>

            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知识和技巧,我根本就未曾知晓。

            本文链接:肖运华 » 网站策划设计制作优化 » CSS3 transform之scale缩放|transition之过渡动画调整手记
            转载请注明:http://www.gipsh.com/2158.html

            发表评论

            电子邮件地址不会被公开。

            极速赛车10选1稳_Welcome