CSS實現div隨機移動的方式有很多種,下面介紹一種簡單易懂的實現方法。
首先,在HTML文件中添加一個需要移動的div元素,并定義其樣式:
<code><div id="move"></div> <style> #move { width: 50px; height: 50px; background-color: red; position: absolute; } </style> </code>
接下來,在CSS文件中通過@media和@keyframes來實現隨機移動的動畫效果:
<code> @media screen and (min-width: 768px) { @keyframes move { from { /*起始位置*/ top: 50px; left: 50px; } to { /*結束位置*/ /*使用JS生成隨機位置*/ top: Apx; left: Bpx; } } } #move { animation: move 3s ease infinite; } </code>
其中,在@media中限定了屏幕寬度大于768px時才會使用該動畫效果。
在@keyframes中,通過from定義動畫的起始位置,to定義動畫的結束位置,同時使用JS生成隨機位置。在這里,可以使用Math.random()方法生成隨機數,再根據需要移動的距離進行計算。
最后,通過將動畫效果添加到#move的樣式中,使其生效。
以上就是簡單的實現div隨機移動的CSS代碼和方法,希望能對需要的人有所幫助。