用伪元素after添加动画蒙版

最新推荐文章于 2023-06-15 17:14:15 发布

原创最新推荐文章于 2023-06-15 17:14:15 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #html #css

本文介绍了如何利用CSS3的伪元素`::after`，无需额外HTML标签，即可为页面添加动态蒙版效果。通过CSS3的动画属性，可以轻松实现蒙版的动态变化，为网页增添视觉交互体验。

#不用加div就可以添加动态蒙版啦
接下来让我们看一看怎么写吧

<div class="m_box">
	<div class="mask"></div>
</div>

.m_box{
	width: 500px;
	height: 300px;
	border: 1px solid red;
	/* overflow: hidden; */
	position: relative;
	margin: 0 auto;
}
.m_box .mask::before{
	content: '';
	width: 100%;
	height: 100%;
	background: skyblue;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1s;
}
.m_box .mask:hover::before{
	transform: scale(1,1);
}
.m_box:hover .mask::before{
	transform: scale(0,0);
}