css3使图片具有淡入淡出的效果

			

css样式如下:

		 	.anim_fade_image{
		 		    position:absolute;
    				-webkit-transition: opacity 3s ease-in-out;
    				-moz-transition: opacity 3s ease-in-out;
    				-o-transition: opacity 3s ease-in-out;
    				transition: opacity 3s ease-in-out;
		 	}
		.anim_fade_image:hover, .anim_fade_image_hover {
    		opacity:0;
    		filter: alpha(opacity=0);
			}
			#juzhong{
				width: 216px;
				height: 308px;
				margin: 59.5px 41.5px;
			}
			#juzhong2{
				width: 216px;
				height: 308px;
				margin: 59.5px 41.5px;
			}
			#juzhong3{
				width: 216px;
				height: 308px;
				margin: 59.5px 52.5px;
			}

效果图如下:

鼠标放在图上:

鼠标一走恢复:


你可能感兴趣的:(html,css)