css+svg完成b站充电实际效果的示例编码

日期：2021-02-27 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

 

难点

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(⑸0%);
      border-radius: 4px;
      cursor: pointer;
    }
    /* 设定文字垂直居中器皿 */
    #text-con {
      width: 100px;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    /* 做1个小闪电 */
    #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(⑸5deg);
    }
    #linght::after {
      position: absolute;
      top: ⑴3px;
      left: ⑴1px;
      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;
    }

这里做的便是建立1个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 ⑴ 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 ⑴ 790 308)" fill="white" />
      </svg>

用的是这东西，网页页面版线上的，画好后便可以右击拷贝编码了，是否很简易！ www.figma.com/

 

既然svg绘画好了，就要想如何进行了

必须的物品：
1：svg底色为灰色的图；
2：1个粉色的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 ⑴ 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 ⑴ 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 ⑴ 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 ⑴ 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: ⑸px;
      top: 15px;
    }
    /* 对svg图型设定宽高 */
    svg {
      width: 100%;
      height: 100%;
    }
    /* 建立1个蒙版 宽度为0，当我hover充电框的情况下，宽度进行 */
    #mask {
      width: 0px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition:all 0.5s;
    }
    /* 对蒙版的sbg独立设定宽高，确保宽度高矮有1个固定不动值而并不是百分比 */
    #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:⑴5px;
      top:0px;
    }
    /* 建立黄色挪动的內容 */
    #orange-mask svg {
      position: absolute;;
      top:0;
      left:15px;
      width: 157px;
      height: 55px;
    }
    @keyframes move1 {
      0%{
        left:⑴5px;
      }
      100%{
        left:140px;
      }
    }
    @keyframes movetwo {
      0%{
        left:15px;
      }
      100%{
        left:⑴40px;
      }
    }
    #people{
      position:absolute;
      right:10px;
      top:8px;
      font-size:12px;
      font-family:"雅黑";
      color:#aaa;
    }
    #people>b{
      color:#777;
    }

在其中css解决最难的地区在于黄色svg和黄色svg蒙版的地区

由于既要确保黄色svg的蒙版从左向右挪动，又要确保黄色svg部位确保不会改变；
蒙版为父元素，黄色svg为子元素，
父元素加上精准定位后，父元素挪动，子元素1定会跟随挪动，
假如子元素加上精准定位，父元素不加上精准定位 或 父元素一切正常精准定位，子元素精准定位为fixed，
这有会致使父元素蒙版不可以对子元素外溢的一部分开展掩藏，在这我纠结了好长时间
！！！随后我就忽然发现
父元素不管以多块的速率挪动多远的间距，子元素要是以同样的速率挪动相反的间距，
子元素就可以确保1直以1个部位维持不会改变！！！子元素就相对性body是静止不动的！！

move1是父元素蒙版的，movetwo是黄色svg图型的，请不必调侃起名。。。。

move1挪动多远，movetwo就挪动相反的间距

 @keyframes move1 {
      0%{
        left:⑴5px;
      }
      100%{
        left:140px;
      }
    }
    @keyframes movetwo {
      0%{
        left:15px;
      }
      100%{
        left:⑴40px;
      }
    }

所有的编码

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

<head>
  <meta charset="UTF⑻">
  <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(⑸0%);
      border-radius: 4px;
      cursor: pointer;
    }
    /* 设定文字垂直居中器皿 */
    #text-con {
      width: 100px;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    /* 做1个小闪电 */
    #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(⑸5deg);
    }
    #linght::after {
      position: absolute;
      top: ⑴3px;
      left: ⑴1px;
      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: ⑸px;
      top: 15px;
    }
    /* 对svg图型设定宽高 */
    svg {
      width: 100%;
      height: 100%;
    }
    /* 建立1个蒙版 宽度为0，当我hover充电框的情况下，宽度进行 */
    #mask {
      width: 0px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition:all 0.5s;
    }
    /* 对蒙版的sbg独立设定宽高，确保宽度高矮有1个固定不动值而并不是百分比 */
    #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:⑴5px;
      top:0px;
    }
    /* 建立黄色挪动的內容 */
    #orange-mask svg {
      position: absolute;;
      top:0;
      left:15px;
      width: 157px;
      height: 55px;
    }
    @keyframes move1 {
      0%{
        left:⑴5px;
      }
      100%{
        left:140px;
      }
    }
    @keyframes movetwo {
      0%{
        left:15px;
      }
      100%{
        left:⑴40px;
      }
    }
    #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 ⑴ 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 ⑴ 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 ⑴ 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 ⑴ 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 ⑴ 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 ⑴ 790 308)" fill="white" />
        </svg>
      </div>
      <p id="people">共 <b>0</b> 人</p>
    </div>
  </div>
</body>

</html>

到此这篇有关css+svg完成b站充电实际效果的示例编码的文章内容就详细介绍到这了,更多有关css b站充电內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：根据HTML5超酷摄像头（HTML5 webcam）照相作用完成编 返回下一篇：没有了