css3解决div动画过渡效果

2019-06-15

随着h5的铺天盖地,我们在对网页特效的时候,互动性和趣味性显得尤为重要,现在学习一个简单的css3过渡效果,这种情况运用很广泛,兼容性好。




如上图,实现hover放到div上div里面的span标签发生移动

<div><span>起始位置</span></div>


css代码结构

div span{ position:relative; left:0px;}
div:hover span{ left:200px}

实现到这里已经可以实现鼠标放到div上,span标签位置发生移动,但是没有过渡,很尴尬的效果,那么如何解决过渡一个动画呢,在span里面加入属性如下:

div span{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


那么是不是鼠标放上去,从起始位置慢慢移动到终点位置了呢。1s为过渡效果时间,可以根据实际情况调整,越大过渡时间越长。