HTML+CSS实现点赞效果

效果演示

HTML+CSS实现点赞效果

HTML

<div class="heart-container" title="Like">
  <input type="checkbox" class="checkbox" id="Give-It-An-Id">
  <div class="svg-container">
    <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z">
      </path>
    </svg>
    <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z">
      </path>
    </svg>
    <svg class="svg-celebrate" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="10,10 20,20"></polygon>
      <polygon points="10,50 20,50"></polygon>
      <polygon points="20,80 30,70"></polygon>
      <polygon points="90,10 80,20"></polygon>
      <polygon points="90,50 80,50"></polygon>
      <polygon points="80,80 70,70"></polygon>
    </svg>
  </div>
</div>

• heart-container：这是最外层的容器，包含了一个复选框和SVG容器。
• checkbox：这是一个隐藏的复选框，用于触发点赞动画。
• svg-container：这个容器用于包裹所有的SVG图形。
• svg-outline：这是一个SVG图形，显示心形的轮廓。
• svg-filled：这是另一个SVG图形，显示填充的心形。
• svg-celebrate：这是一个SVG图形，用于显示庆祝动画（例如，心形跳动）。

CSS

.heart-container {
  --heart-color: rgb(255, 91, 137);
  position: relative;
  width: 50px;
  height: 50px;
  transition: .3s;
}
.heart-container .checkbox {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
  cursor: pointer;
}
.heart-container .svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.heart-container .svg-outline,
        .heart-container .svg-filled {
  fill: var(--heart-color);
  position: absolute;
}

.heart-container .svg-filled {
  animation: keyframes-svg-filled 1s;
  display: none;
}
.heart-container .svg-celebrate {
  position: absolute;
  animation: keyframes-svg-celebrate .5s;
  animation-fill-mode: forwards;
  display: none;
  stroke: var(--heart-color);
  fill: var(--heart-color);
  stroke-width: 2px;
}
.heart-container .checkbox:checked~.svg-container .svg-filled {
  display: block
}
.heart-container .checkbox:checked~.svg-container .svg-celebrate {
  display: block
}
@keyframes keyframes-svg-filled {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
    filter: brightness(1.5);
  }
}
@keyframes keyframes-svg-celebrate {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
    display: none;
  }
}

• position: relative;：设置相对定位，使得子元素可以相对于这个容器进行定位。
• width 和 height：设置元素的宽度和高度。
• transition：设置过渡效果，用于平滑地过渡变化。
• opacity: 0;：设置透明度为0，使复选框不可见。
• z-index：设置元素的堆叠顺序。
• cursor: pointer;：设置鼠标悬停时的指针样式。
• display: flex;：设置容器为弹性盒模型，用于居中SVG图形。
• justify-content 和 align-items：用于在弹性盒模型中水平和垂直居中内容。
• fill：设置SVG图形的填充颜色。
• animation：定义动画效果，包括动画名称、持续时间和其他动画属性。
• animation-fill-mode: forwards;：设置动画完成后的样式，这里表示保持最后一帧的状态。
• keyframes-svg-filled：定义填充心形的动画，包括缩放和亮度变化。
• keyframes-svg-celebrate：定义庆祝动画，包括缩放、透明度和亮度变化。
• svg-filled：显示填充的心形SVG图形。
• svg-celebrate：显示庆祝动画的SVG图形。