css简单实现鼠标悬浮时图片向上浮动的效果

---

前言

css简单实现鼠标悬浮时图片向上浮动的效果

---

一、效果图

二、使用步骤

1.HTML代码

代码如下（示例）：

<div class="box"></div>

先写一个div。图片可以放在这个div里。当然也可以直接用img。

2.CSS代码

悬浮前代码如下（示例）：

.box{
		width: 200px;
		height: 400px;
		background-color: aquamarine;
		margin-top: 300px;
		margin-left: 300px;
		transition: all 0.3s;/* 上浮这个过程需要的时间 */
}

悬浮时代码如下（示例）：

.box:hover {
				box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
				transform: translate(0, -10px);/* 鼠标悬浮时盒子上移10px */
			}

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了怎么使用css实现图片在鼠标悬浮时实现上浮的效果。