初体验新拟态风的设计之美

初体验新拟态风的设计之美

• 欢迎关注：xssy5431 小拾岁月
• 参考链接：https://mp.weixin.qq.com/s/B5j7Z0yJS60VFkSj7UT_iQ，回复 “拟态风” 查看
  

效果展示

页面布局

<div class="container">
	<div class="btn">
		<img class="btn_img" src="./img/dy.png" alt="抖音" />
	</div>
	<div class="btn">
		<img class="btn_img" src="./img/facebook.png" alt="facebook" />
	</div>
	<div class="btn">
		<img class="btn_img" src="./img/qq.png" alt="QQ" />
	</div>
	<div class="btn">
		<img class="btn_img" src="./img/wx.png" alt="微信" />
	</div>
	<div class="btn">
		<img class="btn_img" src="./img/xl.png" alt="新浪" />
	</div>
</div>

页面样式

.btn {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.3), -18px -18px 30px rgba(255, 255, 255, 1);
	transition: all 0.3s ease-out;
}

.btn_img {
	width: 60px;
	transition: all 0.3s ease-out;
	background-color: transparent;
}

.btn:hover {
	cursor: pointer;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
		0 0 0 rgba(255, 255, 255, 0.1),
		inset 18px 18px 30px rgba(0, 0, 0, 0.3),
		inset -18px 30px rgba(255, 255, 255, 1);
}

.btn:hover .btn_img {
	width: 55px;
	height: 55px;
}

代码分析

• 拟态风 主要通过 box-shadow 实现，通过 inset 设置 内阴影。
• 同时，通过鼠标移入改变元素的大小，是页面更加贴近实物即可。

温馨提示

更多博文，请关注：xssy5431 小拾岁月，回复 “拟态风” 查看