html鼠标悬停图片浮动
时间: 2023-10-04 20:12:43 浏览: 44
要实现鼠标悬停图片浮动的效果,可以使用CSS中的`transform`和`transition`属性。具体步骤如下:
1. 在HTML中添加一个图片元素,例如`<img src="your-image-url">`。
2. 在CSS中为该图片元素添加如下样式:
```css
img {
transition: transform 0.5s ease;
}
```
这里设置了一个`transition`属性,表示在0.5秒内对`transform`属性进行动画过渡。
3. 当鼠标悬停在图片上时,为该图片添加如下样式:
```css
img:hover {
transform: translateY(-10px);
}
```
这里使用了`transform`属性来实现图片的移动效果。`translateY(-10px)`表示沿Y轴向上移动10个像素。
完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hover Image Float</title>
<style>
img {
transition: transform 0.5s ease;
}
img:hover {
transform: translateY(-10px);
}
</style>
</head>
<body>
<img src="your-image-url">
</body>
</html>
```