页面动画实例1（HTML5+CSS3 通过外边距实现图片的运动）

效 果 图

通过外边距实现图片的运动，同时让文本内容实现动态消失的效果。

代码模块：

    
    
    



    

        
        
MelanceXin
    

针对鼠标不能跟着图片一起行动的情况

html:hover .img{					//实现效果，鼠标放在页面内就执行 .img的animation
		animation-name:image_a;  	// animation 名字
		animation-delay:500ms;			//animation 延迟
		animation-duration:1s;			//animation 持续时间
		animation-fill-mode:forwards;		//动画停止在最后一帧   若没进行设置，动画则会在结束后回到起始位置
	}

可以不用animation，用 transition 也能实现图片的移动，如下

html:hover .img{
transition-delay:500ms'
transition-duration:1s;
width:100px;
height:100px;
margin-top:0px;
}

对比：animation 使用功能更加详细，但是同transition 相比之下，在简单的实现效果下，写法上显得更加复杂。