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

fox/ 2023年07月18日/ CSS教程/ 浏览 924

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



其实我们可以通过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:阴影的颜色,方向,尺寸


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

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

发表评论

暂无评论,抢个沙发...

客服 工单