如何在网页中通过css实现鼠标悬停，模拟弹出带阴影的效果

在流量网站中我们经常会见到这种块结构在鼠标悬停时，向上移动，同时模拟弹出带阴影的效果。

其实我们可以通过css简单实现，实现原理就是把位移css动画和阴影动画相结合，具体实现方式如下。

结构部分:

jiangqie-site-ac可以对于任何块容器，您可以使用任何div，h1~h6，p等标签，仅对动画有效，对其他布局，浮动，结构属性没有影响。

<li class="jiangqie-site-ac">
	<a href="/link/13.html">
		<div class="jiangqie-site-icon">
			<img alt="Angular" src="https://pro.jiangqie.com/wp-content/uploads/2020/12/12.jpg">
		</div>
		<div class="jiangqie-site-info">
		<h4>Angular</h4>
		<p>一套框架，多种平台</p>
		</div>
	</a>
</li>

css部分：

.jiangqie-site-ac {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}
.jiangqie-site-ac:hover {
	transform: translateY(-4px);
	-webkit-transform: translateY(-4px);
	-moz-transform: translateY(-4px);
	box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
	-webkit-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
	-moz-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

其中主要参数如下：

transition：位移时间和时间曲线

transform：位移距离和方向

box-shadow：阴影的颜色，方向，尺寸

具体可以参考以下两个展示及不同形式的应用：

追格产品——酱茄主题专业版，网站列表