CSS中實現(xiàn)圖案跟著鼠標(biāo)走的效果,可以通過使用JavaScript和CSS動畫來實現(xiàn),下面是一個簡單的示例代碼,可以讓一個圖片元素跟隨鼠標(biāo)的移動而移動:
HTML代碼:
<div id="container"> <img id="image" src="image.png" /> </div>
CSS代碼:
#container { position: relative; height: 100vh; width: 100vw; } #image { position: absolute; top: 0; left: 0; transition: transform 0.3s ease-in-out; }
JavaScript代碼:
document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; var image = document.getElementById('image'); image.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; });
在這個示例中,我們首先將圖片元素的position屬性設(shè)置為absolute,這樣它就可以跟隨鼠標(biāo)的移動而移動了,我們使用JavaScript監(jiān)聽鼠標(biāo)移動事件,并在每次移動時更新圖片元素的位置,為了實現(xiàn)平滑的移動效果,我們還使用了CSS過渡動畫。
需要注意的是,這個示例中的圖片元素始終保持在容器的左上角,如果你想要讓圖片元素在容器中自由移動,你需要相應(yīng)地調(diào)整圖片元素的position屬性為relative,并取消對top和left屬性的設(shè)置。