HTML----我的心里只有你（纯css源代码）

编程墨客

于 2024-08-15 14:44:42 发布

阅读量95

点赞数 4

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/Mumyi_/article/details/141221915

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现结果（鼠标放到心上心会展开）

代码实现

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

        width: var(--s);
        aspect-ratio: 1;
        padding: calc(0.09 * var(--s)) calc(var(--s) / 2 - var(--_p));
        box-sizing: border-box;
        object-fit: cover;
        border-image: radial-gradient(#e5414e 69%, #0000 70%) 84.5% /
          calc(var(--s) / 2) / 0 var(--_p);
        clip-path: polygon(
          calc(-41% - var(--_p)) 0,
          calc(50% - var(--_p)) 91%,
          calc(50% + var(--_p)) 91%,
          calc(141% + var(--_p)) 0
        );
        transition: 0.5s;
        cursor: pointer;
        --_p: 0px;
      }
      img:hover {
        --_p: calc(var(--s) / 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://gw.alicdn.com/imgextra/O1CN01rOGq191KlTe1YyiZM_!!6000000001204-2-yinhe.png_.webp"
      alt=""
    />
  </body>
</html>