SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!-- <img src="https://img1.baidu.com/it/u=988793156,2827676778&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680973200&t=fe80faaafb76b9bb333c33a1a6005b91" alt=""> -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>奇妙的头像</title>
  </head>
  <body>
    <div class="container">
      <img
        src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0734ec5bd1449d8933ce76fb4b9a700~tplv-k3u1fbpfcp-watermark.image?"
        alt="Kevin Powell"
      />
    </div>
  </body>
  <style>
    :root {
      --body-bgc-color: rgb(141, 139, 139);
      --container-bgc-clor: rgb(201, 199, 199);
    }
    html,
    body {
      height: 100vh;
      width: 100vw;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--body-bgc-color);
    }
    .container {
      width: 400px;
      height: 400px;
      background-color: var(--container-bgc-clor);
      border-radius: 2% 10%;
      box-shadow: 10px 10px 10px 0px #616161;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      --s: 200px; /* image size */
      --b: 5px; /* border thickness */
      --c: #255b98; /* border color */
      --cb: #f3bf99; /* background color */
      --_g: content-box no-repeat center / calc(100% / var(--f)) 100%; /* content-box: 内容区域开始显示背景图 放大后背景图大小不变 */
      --_o: calc(
        (1 / var(--f) - 1) * var(--s) / 2 - var(--b)
      ); /* offset 相对于原来的长度，所以放大的长度-原来的长度除以2在除以倍数 */
      --f: 1; /* initial scale */
      --mh: calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px);
      width: var(--s);
      aspect-ratio: 1;
      padding-top: calc(var(--s) / 5); /* 防止上面挡住人物，保留上部分空间 */
      cursor: pointer;
      border-radius: 0 0 999px 999px;
      outline: var(--b) solid var(--c);
      outline-offset: var(--_o);
      background: radial-gradient(
          circle closest-side,
          var(--cb) calc(99% - var(--b)),
          var(--c) calc(100% - var(--b)),
          var(--c) 99%,
          transparent 100%
        )
        var(--_g);
      -webkit-mask: linear-gradient(#000 0 0) no-repeat center var(--mh) 50%,
        radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
      transform: scale(var(--f));
      transition: 0.45s;
    }
    img:hover {
      --f: 1.4;
    }
  </style>
</html>

            
img {
  --s: 280px; /* image size */
  --b: 5px; /* border thickness */
  --c: #C02942; /* border color */
  --f: 1; /* initial scale */

  --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
  --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));

  width: var(--s);
  aspect-ratio: 1;
  padding-top: calc(var(--s)/5);
  cursor: pointer;
  border-radius: 0 0 999px 999px;
  outline: var(--b) solid var(--c);
  outline-offset: var(--_o);
  background: 
    radial-gradient(
      circle closest-side,
      #ECD078 calc(99% - var(--b)),
      var(--c) calc(100% - var(--b)) 99%,
      #0000) var(--_g);
  mask:
    linear-gradient(#000 0 0) no-repeat
    50% calc(-1 * var(--_o)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
    radial-gradient(
      circle closest-side,
      #000 99%,
      #0000) var(--_g);
  transform: scale(var(--f));
  transition: .5s;
}
img:hover {
  --f: 1.4; /* hover scale */
}