HTML+CSS实现的头像遮罩散开特效
在开发中我们经常会遇到一些奇奇怪怪的需求，比如头像的一些特效，比如我之前公司就有这个需求。 先看效果图
这个是不是看起来挺复杂，但其实写出来一点也不费劲，你把它想象成三层结构，其实最底层是一个图片，中间是遮罩，最后是一个图片我们只需要将鼠标hover的时候，设置一个动画效果让图片呈圆形散开就可以了。是不是听着挺简单，那么我们下面来实现它！
首先我们创建一个html文件，写出最基本的配置，需要一个容器添加即可。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="avatar"></div>
</body>
</html>接下来重点来了，需要我们强大的css就可以实现的头像特效
css
<style>
* {
margin: 0;
padding: 0;
}
.avatar {
margin: 100px auto;
background-image: url(./avatar.webp);
background-size: 110%, 110%;
background-position: center;
background-repeat: no-repeat;
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
border-radius: 50%;
border: 2px solid #000;
}
</style>在这段代码中呢 我们只需要给页面把默认的Margin和padding去除，然后给容器一个居中显示的效果，引入自己的头像，为什么我这里大小设置了110%呢因为我这个图片铺不满索性就放大了。接下来设置宽高相对定位圆角即可。
然后我们接着给容器添加伪元素的after和before，以及添加动画效果和定位
css
<style>
* {
margin: 0;
padding: 0;
}
.avatar {
margin: 100px auto;
background-image: url(./avatar.webp);
background-size: 110%, 110%;
background-position: center;
background-repeat: no-repeat;
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
border-radius: 50%;
border: 2px solid #000;
}
.avatar::before,
.avatar::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: all 0.3s;
left: 0;
top: 0;
}
</style>这下我们的三层结构就出来了
下面直接给鼠标添加hover的过渡效果即可
css
<style>
* {
margin: 0;
padding: 0;
}
.avatar {
margin: 100px auto;
background-image: url(./avatar.webp);
background-size: 110%, 110%;
background-position: center;
background-repeat: no-repeat;
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
border-radius: 50%;
border: 2px solid #000;
}
.avatar::before,
.avatar::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: all 0.3s;
left: 0;
top: 0;
}
.avatar::before {
background-color: rgba(0, 0, 0, 0.5);
}
.avatar::after {
background: inherit;
clip-path: circle(0% at 50% 50%);
}
.avatar:hover::after {
clip-path: circle(50% at 50% 50%);
}
</style>解释一下after中background是继承的父元素，clip-path是裁剪方式
现在跑一下效果就出来了
附上完整代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.avatar {
margin: 100px auto;
background-image: url(./avatar.webp);
background-size: 110%, 110%;
background-position: center;
background-repeat: no-repeat;
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
border-radius: 50%;
border: 2px solid #000;
}
.avatar::before,
.avatar::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: all 0.3s;
left: 0;
top: 0;
}
.avatar::before {
background-color: rgba(0, 0, 0, 0.5);
}
.avatar::after {
background: inherit;
clip-path: circle(0% at 50% 50%);
}
.avatar:hover::after {
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="avatar"></div>
</body>
</html>觉得有所帮助的话，点击关注收藏不迷路哦~