用CSS+SVG完美还原B站充电效果，打造独一无二的礼物呈现体验

前端

2023-11-04 11:31:14

CSS + SVG 充电效果：为你的项目注入互动式震撼

充电效果魅力

B 站充电效果凭借其独特的礼物呈现方式，风靡直播圈。它让用户能够以一种既有趣又富有互动性的方式向主播表达他们的支持。CSS 和 SVG 的强强联合，赋予了充电效果令人惊叹的视觉效果、卓越的互动性以及高度的可定制性。

揭秘 CSS + SVG 充电效果

实现 CSS + SVG 充电效果的步骤简单明了：

创建一个父元素： 作为充电效果的容器，父元素需要具有固定的尺寸和背景色。
创建 SVG 元素： SVG 元素包含充电效果的图形，可以是任何形状或图像。
将 SVG 元素添加到父元素中： 将 SVG 元素居中添加到父元素中。
为 SVG 元素添加 CSS 动画： 使用 CSS 动画赋予 SVG 元素充电时的动画效果。
为父元素添加 CSS 动画： 为父元素添加 CSS 动画，模拟充电时的效果。

充电效果代码示例

<!DOCTYPE html>
<html>
<head>
  
  <style>
    #parent {
      width: 200px;
      height: 200px;
      background-color: #000;
      position: relative;
    }

    #svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #svg path {
      fill: #FF0000;
      animation: move1 2s infinite alternate;
    }

    #parent:hover #svg path {
      animation: move2 2s infinite alternate;
    }

    @keyframes move1 {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes move2 {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.5);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  </style>
</head>
<body>
  <div id="parent">
    <svg id="svg" width="100px" height="100px">
      <path d="M50 0 L0 100 L100 100 Z" />
    </svg>
  </div>
</body>
</html>