效果图片：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .boxx {
      z-index: 999;
      position: fixed;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
    }

    .boxx li {
      margin: 0 0 0 auto;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background-color: red;
      color: white;
      transition: width 0.3s ease;
      position: relative;
    }

    .boxx li.F {
      background-color: #6cacff;
    }

    .boxx li.G {
      background-color: #4efc82;
    }

    .boxx li.A {
      background-color: #6cacff;
      
    }

    .boxx li.H {
      background-color: #4efc82;
    }

    .boxx li.X {
      background-color: #6cacff;
    }
    .boxx li.W {
      background-color: #4efc82;
    }

    .boxx li:hover {
      width: 150px;
      transform-origin: right;
    }

    .boxx li:hover .en {
      opacity: 1;
    }

    .boxx li .en {
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      opacity: 0;
      left: 10px;
      transition: opacity 0.3s ease;
      transition-delay: 0.15s;
    }

    .boxx li .num {
      width: 23px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 8.5px;
    }
  </style>
  <body>
    <div class="right-center">
      <div class="boxx">
        <a href=""><li class="F">
          <div class="en"><span>Feacbook</span></div>
          <div class="num">
            <svg t="1699955635963" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4014" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200"><path d="M694.144 0c-31.872 0-62.528 3.84-98.304 17.92-72.704 29.376-109.76 98.368-109.76 205.76v104.832H384v175.104h102.08v504.896h208.064v-504.96h141.696l19.2-175.04h-160.896V249.216c0-24.256 2.56-42.176 8.96-52.352 8.96-15.36 26.816-23.04 54.848-23.04h94.464V0h-158.272" fill="#ffffff" p-id="4015"></path></svg>
          </div>
        </li></a> 
        <a href="">
        <li class="G">
          <div class="en"><span>Instagram</span></div>
          <div class="num">
            <svg t="1699955751404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6072" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 306.9c-113.5 0-205.1 91.6-205.1 205.1S398.5 717.1 512 717.1 717.1 625.5 717.1 512 625.5 306.9 512 306.9z m0 338.4c-73.4 0-133.3-59.9-133.3-133.3S438.6 378.7 512 378.7 645.3 438.6 645.3 512 585.4 645.3 512 645.3zM725.5 250.7c-26.5 0-47.9 21.4-47.9 47.9s21.4 47.9 47.9 47.9 47.9-21.3 47.9-47.9c-0.1-26.6-21.4-47.9-47.9-47.9z" p-id="6073" fill="#ffffff"></path><path d="M911.8 512c0-55.2 0.5-109.9-2.6-165-3.1-64-17.7-120.8-64.5-167.6-46.9-46.9-103.6-61.4-167.6-64.5-55.2-3.1-109.9-2.6-165-2.6-55.2 0-109.9-0.5-165 2.6-64 3.1-120.8 17.7-167.6 64.5C132.6 226.3 118.1 283 115 347c-3.1 55.2-2.6 109.9-2.6 165s-0.5 109.9 2.6 165c3.1 64 17.7 120.8 64.5 167.6 46.9 46.9 103.6 61.4 167.6 64.5 55.2 3.1 109.9 2.6 165 2.6 55.2 0 109.9 0.5 165-2.6 64-3.1 120.8-17.7 167.6-64.5 46.9-46.9 61.4-103.6 64.5-167.6 3.2-55.1 2.6-109.8 2.6-165z m-88 235.8c-7.3 18.2-16.1 31.8-30.2 45.8-14.1 14.1-27.6 22.9-45.8 30.2C695.2 844.7 570.3 840 512 840c-58.3 0-183.3 4.7-235.9-16.1-18.2-7.3-31.8-16.1-45.8-30.2-14.1-14.1-22.9-27.6-30.2-45.8C179.3 695.2 184 570.3 184 512c0-58.3-4.7-183.3 16.1-235.9 7.3-18.2 16.1-31.8 30.2-45.8s27.6-22.9 45.8-30.2C328.7 179.3 453.7 184 512 184s183.3-4.7 235.9 16.1c18.2 7.3 31.8 16.1 45.8 30.2 14.1 14.1 22.9 27.6 30.2 45.8C844.7 328.7 840 453.7 840 512c0 58.3 4.7 183.2-16.2 235.8z" p-id="6074" fill="#ffffff"></path></svg>
          </div>
        </li>
        </a>
        <a href="https://www.youtube.com/channel/UCVC3LT4jz8G8dN8ml_hAdqQ">
        <li class="A">
          <div class="en"><span>Youtube</span></div>
          <div class="num">
            <svg t="1699955827289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7744" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1002.453333 264.746667a128.298667 128.298667 0 0 0-89.088-89.088c-79.786667-21.376-400.896-21.376-400.896-21.376s-320.298667-0.426667-400.896 21.376A128.298667 128.298667 0 0 0 22.485333 264.746667a1333.205333 1333.205333 0 0 0-22.272 247.68 1333.205333 1333.205333 0 0 0 22.272 246.741333 128.298667 128.298667 0 0 0 89.088 89.088c79.701333 21.418667 400.896 21.418667 400.896 21.418667s320.256 0 400.896-21.418667a128.298667 128.298667 0 0 0 89.088-89.088 1333.205333 1333.205333 0 0 0 21.333334-246.741333 1333.205333 1333.205333 0 0 0-21.333334-247.68zM409.984 665.642667V358.741333l267.264 153.685334z" p-id="7745" fill="#ffffff"></path></svg>
          </div>
        </li>
        </a>
        <a href="https://www.tiktok.com/@ebiketurbo">
        <li class="H">
          <div class="en"><span>Tiktok</span></div>
          <div class="num">
            <svg t="1699957080533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14614" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M841.6 222.2c-6.8-3.6-13.4-7.4-20-11.6-18.8-12.4-35.8-27-51.2-43.4-38.2-43.6-52.4-88-57.6-119h0.2c-4.4-25.8-2.6-42.4-2.2-42.4h-173.8v672.4c0 9 0 18-0.4 26.8 0 1-0.2 2.2-0.2 3.2 0 0.4 0 1-0.2 1.4v0.4c-0.4 6-1.2 12-2.4 17.8-1.2 6-2.8 11.8-4.6 17.4-1.8 5.8-4.2 11.4-6.8 16.8-2.6 5.4-5.4 10.8-8.8 15.8-3.2 5-6.8 10-10.6 14.6s-8 9-12.2 13.2c-4.4 4.2-9 8-13.8 11.6-4.8 3.6-9.8 6.8-15.2 9.8-11 6.2-22.6 11-34.8 14.2-12.2 3.2-24.6 4.8-37.2 4.8-81 0-146.6-66-146.6-147.6s65.6-147.6 146.6-147.6c15.4 0 30.4 2.4 45.2 7.2l0.2-177c-11-1.4-22.2-2.2-33.2-2.6-11.2-0.2-22.2 0-33.4 0.8-11 0.8-22.2 2.4-33 4.4-11 2-21.8 4.6-32.4 7.6-10.6 3.2-21.2 6.8-31.4 11s-20.4 9-30.2 14.2-19.4 11-28.6 17.2-18 13-26.6 20c-15 13-28.8 27.2-41.2 42.6-12.6 15.4-23.6 31.8-33.2 49.2-7.4 12.6-35 63.6-38.4 146-2.2 46.8 12 95.4 18.6 115.4v0.4c4.2 11.8 20.6 52.2 47.2 86.2 21.6 27.4 46.8 51 75.4 71v-0.4l0.4 0.4c84.2 57.2 177.6 53.4 177.6 53.4 16.2-0.6 70.2 0 131.8-29.2 68.2-32.2 107-80.4 107-80.4 12.4-14.4 23.4-29.6 33.2-46 9.8-16.2 18.2-33.2 25-51 15.8-41.4 21-91 21-110.8V344.2c2.2 1.2 30.2 19.8 30.2 19.8s40.4 26 103.6 42.8c45.4 12 106.4 14.6 106.4 14.6v-172.6c-21.6 2.4-65-4.4-109.4-26.6z" p-id="14615" fill="#ffffff"></path></svg>

          </div>
        </li>
        </a>
        <a href="">
        <li class="X">
          <div class="en"><span>Vimeo</span></div>
          <div class="num">
            <svg t="1699956977856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9770" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M895.616 333.12c-3.36 75.008-55.616 177.504-156.608 307.744-104.512 135.872-192.768 203.872-265.024 203.872-44.864 0-82.72-41.376-113.6-124.096-20.768-76-41.376-151.904-62.016-227.776-23.008-82.88-47.616-124.224-73.984-124.224-5.76 0-25.888 12.096-60.256 36.224L128 358.24a11308.32 11308.32 0 0 0 112.128-100.128C290.624 214.4 328.64 191.36 353.888 188.992c59.744-5.76 96.64 35.136 110.368 122.752 14.88 94.624 25.248 153.376 31.008 176.384 17.248 78.496 36.224 117.632 56.96 117.632 16 0 40.16-25.376 72.416-76.256 32.096-51.008 49.376-89.6 51.744-116.256 4.48-43.872-12.768-65.888-51.744-65.888-18.4 0-37.376 4.16-56.896 12.512 37.76-123.744 109.888-184 216.384-180.48 78.88 2.24 116 53.472 111.488 153.728z" p-id="9771" fill="#ffffff"></path></svg>
          </div>
        </li>
        </a>
        <a href="">
        <li class="W">
          <div class="en"><span>Whatsapp</span></div>
          <div class="num"><svg t="1699956997068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10775" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M636 556.571429q7.428571 0 55.714286 25.142857t51.142857 30.285714q1.142857 2.857143 1.142857 8.571429 0 18.857143-9.714286 43.428571-9.142857 22.285714-40.571428 37.428571t-58.285715 15.142858q-32.571429 0-108.571428-35.428572-56-25.714286-97.142857-67.428571T345.142857 508q-41.142857-61.142857-40.571428-110.857143v-4.571428q1.714286-52 42.285714-90.285715 13.714286-12.571429 29.714286-12.571428 3.428571 0 10.285714 0.857143t10.857143 0.857142q10.857143 0 15.142857 3.714286T421.714286 310.857143q4.571429 11.428571 18.857143 50.285714t14.285714 42.857143q0 12-19.714286 32.857143T415.428571 463.428571q0 4 2.857143 8.571429 19.428571 41.714286 58.285715 78.285714 32 30.285714 86.285714 57.714286 6.857143 4 12.571428 4 8.571429 0 30.857143-27.714286t29.714286-27.714285z m-116 302.857142q72.571429 0 139.142857-28.571428t114.571429-76.571429 76.571428-114.571428 28.571429-139.142857-28.571429-139.142858T773.714286 246.857143t-114.571429-76.571429T520 141.714286t-139.142857 28.571428T266.285714 246.857143 189.714286 361.428571 161.142857 500.571429q0 116 68.571429 210.285714l-45.142857 133.142857 138.285714-44q90.285714 59.428571 197.142857 59.428571z m0-789.714285q87.428571 0 167.142857 34.285714T824.571429 196t92 137.428571 34.285714 167.142858-34.285714 167.142857-92 137.428571-137.428572 92-167.142857 34.285714q-111.428571 0-208.571429-53.714285l-238.285714 76.571428 77.714286-231.428571q-61.714286-101.714286-61.714286-222.285714 0-87.428571 34.285714-167.142858T215.428571 196t137.428572-92T520 69.714286z" p-id="10776" fill="#ffffff"></path></svg>
          </div>
        </li>
        </a>
      </div>
    </div>
  </body>
</html>