点赞效果澎湃的心心，爱了爱了

最新推荐文章于 2024-04-15 09:14:42 发布

三十斤代码

最新推荐文章于 2024-04-15 09:14:42 发布

阅读量198

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_42526648/article/details/108927246

版权

css css3 html html5

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>
    <link rel="stylesheet" href="index.css">
</head>
<body>
   <label>
    <input type="checkbox">
    <svg viewBox="0 0 532 532">
        <path id="heart" transform="translate(10, 10)" d="M256,96.5l-19.7-20.3C186.1,24.3,104.5,15.9,49.7,62.6c-62.8,53.6-66.1,149.8-9.9,207.9l193.5,199.8 c12.5,12.9,32.8,12.9,45.3,0l193.5-199.8c56.3-58.1,53-154.3-9.8-207.9l0,0C407.5,15.9,326,24.3,275.7,76.2L256,96.5z"/>
      </svg>
      <span></span>
   </label>
</body>
</html>

css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  svg {
    width: 200px;
    position: relative;
    z-index: 10;
  }
  
  #heart {
    fill: #eee;
    stroke-width: 20px;
    stroke: red;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    stroke-linecap: round;
  }
  
  span, span::after {
    display: block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    
    box-shadow: 0 -160px 0 red, 0 160px 0 red, -160px 0 0 red, 160px 0 0 red;
  }
  
  span::after {
    content: '';
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  }
  
  input[type="checkbox"] {
    display: none;
  }
  
  label {
    cursor: pointer;
  }
  
  input[type="checkbox"]:checked + svg #heart {
    animation: 1s draw-heart linear forwards;
  }
  
  @keyframes draw-heart {
    0% {
      stroke-dashoffset: 1600;
    }
    80% {
      stroke-dashoffset: 0;
      fill: #eee;
    }
    100% {
      fill: red;
      stroke-dashoffset: 0;
    }
  }
  
  input[type="checkbox"]:checked ~ span {
    animation: .5s blink ease-in-out forwards .85s;
  }
  
  input[type="checkbox"]:checked ~ span::after {
    animation: .5s blink-after ease-in-out forwards .85s;
  }
  
  @keyframes blink {
    0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: .8;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      opacity: .8;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0;
    }
  }
  
  @keyframes blink-after {
    0% {
      transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
      opacity: .8;
    }
    50% {
      transform: translate(-50%, -50%) rotate(45deg) scale(1);
      opacity: .8;
    }
    100% {
      transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
      opacity: 0;
    }
  }
  
  input[type="checkbox"]:checked + svg {
    animation: 1s pop linear forwards;
  }
  
  @keyframes pop {
    0% {
      transform: scale(1);
    }
    70% {
      transform: scale(1);
    }
    80% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

三十斤代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点赞效果澎湃的心心，爱了爱了

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> <link rel="stylesheet" hre...
复制链接

扫一扫