前端实战小案例--好看的拟态效果实现

最新推荐文章于 2024-09-12 16:41:01 发布

朽木自雕xmzd

最新推荐文章于 2024-09-12 16:41:01 发布

阅读量2k

点赞数 4

分类专栏：前端前端实战案例文章标签： html css3

本文链接：https://blog.csdn.net/qq_16687863/article/details/105480924

版权

前端同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

前端实战案例

20 篇文章 53 订阅

订阅专栏

前端实战小案例--好看的拟态效果实现

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>好看的拟态效果</title>
	<style>
		/* 这个案例比较基础，就不写详细注释了 */
		html,body{
			margin: 0;
			padding: 0;
			background-color: #efeeee;
		}
		/* flex居中写法 和 绝对定位 + transform居中 */
		.container{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 700px;
			height: 600px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box{
			position: relative;
			width: 100px;
			height: 100px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20px;
			box-shadow: 18px 18px 30px rgba(0,0,0,0.1),
			-18px -18px 30px rgba(255,255,255,1);
			transition: all .2s ease-out;
		}
		.img{
			width: 60px;
			height: 60px;
			transition: all .2s ease-out;
		}
		.text{
			position: absolute;
			bottom: -30px;
			margin: 0;
			padding: 0;
			font-size: 14px;
			color: slategrey;
		}
		/* hover效果 */
		/* inset 为内阴影,用逗号分开时，代表同时存在多个阴影 */
		.box:hover{
			box-shadow: 0 0 0 rgba(0,0,0,0.1),
			0 0 0 rgba(255,255,255,1),
			inset 18px 18px 30px rgba(0,0,0,0.1),
			inset -18px -18px 30px rgba(255,255,255,1);
		}
		.box:hover .img{
			transform: scale(0.9);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<img class="img" src="./录制.png" alt="">
			<p class="text">录像机</p>
		</div>
	</div>
</body>
</html>