CSS实现头像特效

最新推荐文章于 2024-07-18 15:25:55 发布

@前端小菜

最新推荐文章于 2024-07-18 15:25:55 发布

阅读量151

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_48771508/article/details/134397515

版权

效果图：

代码实现：

<!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: 100px auto;
      padding: 0;
      text-align: center;
      background-color: #dbe0c6;
    }
    img {
      /* 宽高 */
      --s: 280px;
      /* 边框色 */
      --c1: #c02942;
      /* 背景色 */
      --c2: #ecd078;
      /* 边框宽度 */
      --b: 5px;   
      /* 缩放比例 */
      --f: 1;
      --bgOption: content-box no-repeat center / calc(100% / var(--f)) 100%;
      --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));

      width: var(--s);
      height: var(--s);
      cursor: pointer;
      transition: 0.5s;
      padding-top: 100px;
      transform: scale(var(--f));
      outline: var(--b) solid var(--c1);
      border-radius: 0px 0px 999px 999px;
      outline-offset: var(--shrink);
      background: radial-gradient(
        circle closest-side,
        var(--c2) calc(99% - var(--b)),
        var(--c1) calc(100% - var(--b)),
        var(--c1) 99%,
        transparent 100%
      ) var(--bgOption);

      mask:linear-gradient(#000 0 0) 
        no-repeat center
        calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
        radial-gradient(
          circle closest-side,
          #000 100%,
          transparent
        ) var(--bgOption);
      -webkit-mask: linear-gradient(#000 0 0) 
        no-repeat center
        calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
        radial-gradient(
          circle closest-side,
          #000 100%,
          transparent
        ) var(--bgOption);
    }

    img:hover {
      --f: 1.35;
    }
  </style>
</head>
<body>
  <img src="./2.jpeg" alt="">
</body>
</html>