要實現當鼠標放在圖片上時圖片會動,可以使用CSS和JavaScript來實現。
首先,在HTML中,將圖片放置在``標簽中,并為其添加一個唯一的ID。
然后,在CSS中,可以使用`transform`屬性來應用動畫效果。例如,可以使用`scale()`函數來縮放圖片,或使用`rotate()`函數來旋轉圖片。可以使用`transition`屬性來定義過渡效果的持續時間和類型。例如:
```css
#myImage {
transition: transform 0.5s ease;
}
#myImage:hover {
transform: scale(1.2);
}
```
這段CSS代碼表示當鼠標懸停在圖片上時,將圖片放大到原始尺寸的1.2倍,過渡效果持續時間為0.5秒。
最后,在JavaScript中,可以使用`addEventListener()`方法來監聽鼠標懸停事件,并在事件發生時應用動畫效果。例如:
```javascript
var myImage = document.getElementById("myImage");
myImage.addEventListener("mouseover", function() {
myImage.style.transform = "scale(1.2)";
});
myImage.addEventListener("mouseout", function() {
myImage.style.transform = "scale(1)";
});
```
這段JavaScript代碼表示當鼠標懸停在圖片上時,將圖片放大到原始尺寸的1.2倍;當鼠標移出圖片時,將圖片恢復到原始尺寸。
通過將上述CSS和JavaScript代碼添加到HTML文件中,就可以實現當鼠標放在圖片上時圖片會動的效果。