CSS中的div是非常常见的元素,它用于分割网页中不同的部分,使页面更加有条理。除此之外,CSS中还有一个非常重要的功能,就是可以通过代码实现div的移动。
div{position: relative;left: 0px;top: 0px;}
上面的代码中,我们定义了一个div,并且使它相对于当前位置进行定位,left和top属性分别控制了div相对于当前位置向左和向上的偏移值。
div:hover{left: 50px;top: 50px;}
当鼠标悬停在div上时,我们通过hover选择器改变了left和top属性,使div向右和向下移动50个像素。
如果想要用动画的形式实现div的移动,我们可以使用CSS3中的transform属性,具体代码如下:
div{transition: all 1s;}div:hover{transform: translate(50px, 50px);}
上面的代码中,我们通过transition属性设置了div的动画时间为1秒,然后通过hover选择器使transform属性发挥作用,移动div的位置。
通过上述代码的学习,我们可以看到,CSS中的div可以通过简单的代码实现移动效果,使网页更加生动有趣。