昆仑资源网

css+svg实现b站充电效果的示例代码
网页制作 2024/12/22 佚名
3 1
昆仑资源网 Design By www.lawayou.com

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的图形，背景色是灰色，看着是不是很多很复杂，没事，这也不是我写的

 <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 d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
        <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
        <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <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="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
      </svg>

用的是这玩意，网页版在线的，画好后就可以右击复制代码了，是不是很简单！ www.figma.com/

css+svg实现b站充电效果的示例代码 

既然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>
</div>

orange-mask是用来做黄色svg的蒙版
 

<div id="orange-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="#ffd52b" stroke-width="20" />
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#ffd52b" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
<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="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<p id="people">共 <b>0</b> 人</p>
</div>
</div>

css的代码

/* 创建图形容器 */
    #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:8px;
      font-size:12px;
      font-family:"雅黑";
      color:#aaa;
    }
    #people>b{
      color:#777;
    }

其中css处理最难的地方在于黄色svg和黄色svg蒙版的地方

因为既要保证黄色svg的蒙版从左向右移动，又要保证黄色svg位置保证不变；
蒙版为父元素，黄色svg为子元素，
父元素添加定位后，父元素移动，子元素一定会跟着移动，
如果子元素添加定位，父元素不添加定位 或者 父元素正常定位，子元素定位为fixed，
这有会导致父元素蒙版不能对子元素溢出的部分进行隐藏，在这我纠结了好久
！！！然后我就突然发现
父元素无论以多块的速度移动多远的距离，子元素只要以相同的速度移动相反的距离，
子元素就能保证一直以一个位置保持不变！！！子元素就相对body是静止的！！

move1是父元素蒙版的，movetwo是黄色svg图形的，请不要吐槽起名。。。。

move1移动多远，movetwo就移动相反的距离

 @keyframes move1 {
      0%{
        left:-15px;
      }
      100%{
        left:140px;
      }
    }
    @keyframes movetwo {
      0%{
        left:15px;
      }
      100%{
        left:-140px;
      }
    }

全部的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    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;
    }

    /* 创建图形容器 */
    #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:8px;
      font-size:12px;
      font-family:"雅黑";
      color:#aaa;
    }
    #people>b{
      color:#777;
    }
  </style>
</head>

<body>
  <div id="con">
    <div id="TA-con">
      <div id="text-con">
        <div id="linght"></div>
        <div id="TA">为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 d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
        <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
        <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <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="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
      </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 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>
      </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 d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
          <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
          <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
          <rect y="186" width="236" height="24" fill="#ffd52b" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
          <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="#ffd52b" />
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
        </svg>
      </div>
      <p id="people">共 <b>0</b> 人</p>
    </div>
  </div>
</body>

</html>
昆仑资源网 Design By www.lawayou.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
昆仑资源网 Design By www.lawayou.com
www.lawayou.com 昆仑资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
昆仑资源网 Design By www.lawayou.com