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可以通過簡單的代碼實現移動效果,使網頁更加生動有趣。
上一篇css中div實現圓
下一篇php https