心里只有你，纯css实现（源代码）_我的心里只有你,纯css实现-CSDN博客

本文链接：https://blog.csdn.net/Tian0815/article/details/140887221

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>练习时长两年半</title>
    <style>
      img {
        --image-size: 500px; /* image size */

        width: var(--image-size);
        aspect-ratio: 1;
        padding: calc(0.09 * var(--image-size)) calc(var(--image-size) / 2 - var(--clip-path));
        box-sizing: border-box;
        object-fit: cover;
        border-image: radial-gradient(#e5414e 69%, #0000 70%) 84.5% /
          calc(var(--image-size) / 2) / 0 var(--clip-path);
        clip-path: polygon(
          calc(-41% - var(--clip-path)) 0,
          calc(50% - var(--clip-path)) 91%,
          calc(50% + var(--clip-path)) 91%,
          calc(141% + var(--clip-path)) 0
        );
        transition: 0.5s;
        cursor: pointer;
        --clip-path: 0px;
      }
      img:hover {
        --clip-path: calc(var(--image-size) / 2);
      }

      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-content: center;
        background: #f9ffb4;
        filter: drop-shadow(0 0 10px #cc333f);
      }
    </style>
  </head>
  <body>
    <img
      src="https://ts1.cn.mm.bing.net/th/id/R-C.ca592b0247871472a7b5e3470696a8ad?rik=y%2bgpubuUpbYRKg&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_bt%2f0%2f11703036045%2f1000&ehk=WQOm9og%2badBejOMWMd3pd5VBzg9wFtwkt%2flZJo7wAi4%3d&risl=&pid=ImgRaw&r=0"
      alt=""
    />
  </body>
</html>