仿哔哩哔哩充电区块/为爱充电

充电演示

999

可以放到网站的小工具里面,具体请自行尝试操作!

# html代码

<div id="con">
    <div id="TA-con">
      <div id="text-con">
        <div id="linght"></div>
        <div id="TA">为爱充电!</div>
      </div>
    </div>
    <div id="tube-con">
      <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
        <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
        <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
        <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
        <rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
        <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
        <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
        <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
      </svg>
      <div id="mask">
        <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>
          <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
          <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
          <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
          <rect y="186" width="236" height="24" fill="#f25d8e"></rect>
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
        </svg>
      </div>
      <div id="orange-mask">
        <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
          <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
          <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
          <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
          <rect y="186" width="236" height="24" fill="#ffd52b"></rect>
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
        </svg>
      </div>
      <p id="people">共 <b>361</b> 人</p>
    </div>
  </div>

# css代码

<style type="text/css">
    /* 设置白色容器 */
    #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;
    }

    /* 创建图形容器 */
    #tube-con {
      width: 157px;
      height: 55px;
      position: absolute;
      right: -5px;
      top: 15px;
    }
    /* 对svg图形设置宽高 */
    svg {
      width: 100%;
      height: 100%;
    }
    /* 创建一个蒙版 宽度为0,当我hover充电框的时候,宽度展开 */
    #mask {
      width: 0px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition:all 0.5s;
    }
    /* 对蒙版的sbg单独设置宽高,保证宽度高低有一个固定值而不是百分比 */
    #mask svg {
      width: 157px;
      height: 55px;
    }
    /* 对充电框hover的时候开始动画,将粉色线条铺开 */
    #TA-con:hover+#tube-con>#mask{
      width:157px;
    }
    /* 对充电框hover的时候开始动画,添加黄色快速移动的动画 */
    #TA-con:hover+#tube-con>#orange-mask{
      animation: move1 0.5s linear 0.2s infinite;
    }
    #TA-con:hover+#tube-con>#orange-mask svg{
      animation: movetwo 0.5s linear 0.2s infinite;
    }
    /* 创建黄色移动的蒙版 */
    #orange-mask{
      width: 18px;
      height: 100%;
      overflow: hidden;
      position:absolute;
      left:-15px;
      top:0px;
    }
    /* 创建黄色移动的内容 */
    #orange-mask svg {
      position: absolute;;
      top:0;
      left:15px;
      width: 157px;
      height: 55px;
    }
    @keyframes move1 {
      0%{
        left:-15px;
      }
      100%{
        left:140px;
      }
    }
    @keyframes movetwo {
      0%{
        left:15px;
      }
      100%{
        left:-140px;
      }
    }
    #people{
      position:absolute;
      right:10px;
      top:16px;
      font-size:12px;
      font-family:"雅黑";
      color:#aaa;
    }
    #people>b{
      color:#777;
    }
  </style>
如果有错位现象,需要自己修改一下哟!

发表评论