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>

觉得有所帮助的话，点击关注收藏不迷路哦~

做一个HTML+CSS实现的头像遮罩散开特效，实用！

HTML+CSS实现的头像遮罩散开特效