拿css怎样做B站的充电动画效果？

　　现在很多朋友都有用B站，其中B站有一个给up主充电的功能，小编觉得挺有意思的，因此这篇文章就给大家分享一下用css+svg怎样做B站的充电动画效果，感兴趣的朋友就继续往下看吧。
 
　　
 
　　难点
 
　　svg图形的两块蒙版制作
 
　　先上代码
 
　　这是左边粉色框框的内容
 
　　这个没啥好说的
 
　　<div id="con">
　　    <div id="TA-con">
　　      <div id="text-con">
　　        <div id="linght"></div>
　　        <div id="TA">为TA充电</div>
　　      </div>
　　    </div>
　　body {
　　      margin: 0;
　　      padding: 0;
　　      background-color: #eee;
　　    }
　　    /* 设置白色容器 */
　　    #con {
　　      width: 350px;
　　      height: 85px;
　　      background-color: #fff;
　　      position: relative;
　　      border-radius: 4px;
　　      margin:50px auto;
　　    }
　　#TA-con {
　　      width: 157px;
　　      height: 50px;
　　      background-color: #f25d8e;
　　      box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
　　      position: absolute;
　　      top: 50%;
　　      left: 5%;
　　      transform: translateY(-50%);
　　      border-radius: 4px;
　　      cursor: pointer;
　　    }
　　    /* 设置文本居中容器 */
　　    #text-con {
　　      width: 100px;
　　      height: 100%;
　　      margin: 0 auto;
　　      position: relative;
　　    }
　　    /* 做一个小闪电 */
　　    #linght {
　　      width: 0;
　　      height: 0;
　　      position: absolute;
　　      top: 36%;
　　      left: 4px;
　　      border-color: transparent;
　　      border-style: solid;
　　      border-width: 10px;
　　      border-top: 10px solid #fff;
　　      border-radius: 4px;
　　      transform: rotate(-55deg);
　　    }
　　    #linght::after {
　　      position: absolute;
　　      top: -13px;
　　      left: -11px;
　　      content: "";
　　      width: 0;
　　      height: 0;
　　      border-color: transparent;
　　      border-style: solid;
　　      border-width: 10px;
　　      border-top: 10px solid #fff;
　　      transform: rotate(180deg);
　　      border-radius: 4px;
　　    }
　　    /* 文字 */
　　    #TA {
　　      float: right;
　　      line-height: 50px;
　　      font-size: 15px;
　　      color: #fff;
　　    }
　　    #TA-con:hover {
　　      background-color: #ff6b9a;
　　    }
　　
　　
 
　　既然svg图画好了，就要想怎么完成了
 
　　需要的东西：
　　1：svg底色为灰色的图；
　　2：一个粉色的svg图，当我鼠标hover到左边粉色框时，粉色svg图完全展开，初始为0；
　　3：快速移动的黄色小方块；
 
　　底色灰色做好了，还差粉色和黄色的svg图
 
　　mask是用来做粉色svg的蒙版的
　　
 
　　<div id="mask">
　　跟灰色svg没有任何的区别，就是改改颜色
　　
 
　　<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
　　<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" />
　　<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" />
　　<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" />
　　<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" />
　　<rect y="186" width="236" height="24" fill="#f25d8e" />
　　<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
　　<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
　　<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
　　<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
　　</svg>