html图片展示动画效果图 CSS3 animate更酷的图片显示效果 张鑫旭-鑫空间-鑫生活...

CSS代码：

.anim_image {

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

cursor:pointer;

}

.anim_image_top {

position: absolute;

-webkit-transform: scale(0, 0);

opacity: 0;

filter: Alpha(opacity=0);

}

.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {

opacity: 1;

filter: Alpha(opacity=100);

-webkit-transform: scale(1, 1);

-webkit-transform-origin: top right;

}

.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {

-webkit-transform: scale(0, 0);

-webkit-transform-origin: bottom left;

}

HTML代码：