99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

body {
      margin: 0;
      padding: 0;
      background-color: #eee;
    }
    /* 設(shè)置白色容器 */
    #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;
    }
    /* 設(shè)置文本居中容器 */
    #text-con {
      width: 100px;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    /* 做一個(gè)小閃電 */
    #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;
    }

css的代碼

/* 創(chuàng)建圖形容器 */
    #tube-con {
      width: 157px;
      height: 55px;
      position: absolute;
      right: -5px;
      top: 15px;
    }
    /* 對(duì)svg圖形設(shè)置寬高 */
    svg {
      width: 100%;
      height: 100%;
    }
    /* 創(chuàng)建一個(gè)蒙版 寬度為0，當(dāng)我hover充電框的時(shí)候，寬度展開(kāi) */
    #mask {
      width: 0px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition:all 0.5s;
    }
    /* 對(duì)蒙版的sbg單獨(dú)設(shè)置寬高，保證寬度高低有一個(gè)固定值而不是百分比 */
    #mask svg {
      width: 157px;
      height: 55px;
    }
    /* 對(duì)充電框hover的時(shí)候開(kāi)始動(dòng)畫(huà)，將粉色線(xiàn)條鋪開(kāi) */
    #TA-con:hover+#tube-con>#mask{
      width:157px;
    }
    /* 對(duì)充電框hover的時(shí)候開(kāi)始動(dòng)畫(huà)，添加黃色快速移動(dòng)的動(dòng)畫(huà) */
    #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;
    }
    /* 創(chuàng)建黃色移動(dòng)的蒙版 */
    #orange-mask{
      width: 18px;
      height: 100%;
      overflow: hidden;
      position:absolute;
      left:-15px;
      top:0px;
    }
    /* 創(chuàng)建黃色移動(dòng)的內(nèi)容 */
    #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蒙版的地方

因?yàn)榧纫ＷC黃色svg的蒙版從左向右移動(dòng)，又要保證黃色svg位置保證不變；
蒙版為父元素，黃色svg為子元素，
父元素添加定位后，父元素移動(dòng)，子元素一定會(huì)跟著移動(dòng)，
如果子元素添加定位，父元素不添加定位 或者 父元素正常定位，子元素定位為fixed，
這有會(huì)導(dǎo)致父元素蒙版不能對(duì)子元素溢出的部分進(jìn)行隱藏，在這我糾結(jié)了好久
！！！然后我就突然發(fā)現(xiàn)
父元素?zé)o論以多塊的速度移動(dòng)多遠(yuǎn)的距離，子元素只要以相同的速度移動(dòng)相反的距離，
子元素就能保證一直以一個(gè)位置保持不變！！！子元素就相對(duì)body是靜止的！！

move1是父元素蒙版的，movetwo是黃色svg圖形的，請(qǐng)不要吐槽起名。。。。

move1移動(dòng)多遠(yuǎn)，movetwo就移動(dòng)相反的距離

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

全部的代碼