CSS 做比较真实有感觉的阴影效果

CSS 如何做一个比较真实有感觉的阴影效果

效果如图：

阴影：你需要了解的：

box-shadow 这个样式可以同时添加多个阴影，以 , 间隔即可
本例中的阴影有两个，一个向左偏移一个向右偏移

box-shadow: 12px 25px 5px rgb(0 0 0 / 10%), -2px 20px 5px rgb(0 0 0 / 10%)

过渡动画

能看到效果图中的阴影是动画进动画出的，而不是直接从没阴影到有阴影。这里用到的是 transition。
仔细看能看到这个过渡是有讲究的，鼠标悬停的时候，阴影变化的比较快，鼠标离开的时候变化比较稍微慢点。这样的感觉会比较好， 如果进出的变化是同等时间，就差点意思。

SCSS

.icon {
	transition: all 0.5s; // 表示从 hover 进入普通状态时，0.5s 内完成变换
	box-shadow: 0 0 0 rgba(0,0,0,0);
	&:hover{
		transition: all 0.2s; // 表示进入 hover 状态时，0.2s 内完成变换
		box-shadow: 12px 25px 5px rgb(0 0 0 / 10%), -2px 20px 5px rgb(0 0 0 / 10%);
	}
}

在线实例：

https://kylebing.cn

这篇好文章是转载于：学新通技术网