仿嗶哩嗶哩充電區(qū)塊 - WordPress區(qū)塊

嗶哩嗶哩用戶中心的側(cè)邊充電樣式很是好看，當(dāng)鼠標(biāo)移動(dòng)到左側(cè)按鈕圖標(biāo)上，右側(cè)我就借鑒了一篇文章做了出來(lái),變成一款區(qū)塊，供大家使用。

• 參考鏈接：詳情

區(qū)塊效果

如何使用

點(diǎn)擊下方的Demo按鈕，右擊鼠標(biāo)查看源代碼，根據(jù)代碼注釋復(fù)制代碼到自己需要的地方，例如古登堡的HTML區(qū)塊或是小工具里面的“自定義HTML”，另外，記得看代碼注釋哦(。???)ノ

視頻教程

詳細(xì)介紹

難點(diǎn)

svg圖形的兩塊蒙版制作

這里做的就是創(chuàng)建一個(gè)svg的圖形，背景色是灰色，看著是不是很多很復(fù)雜，沒(méi)事，這也不是我寫的

 <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>

用的是這玩意，網(wǎng)頁(yè)版在線的，畫好后就可以右擊復(fù)制代碼了，是不是很簡(jiǎn)單！?www.figma.com/

既然svg圖畫好了，就要想怎么完成了

需要的東西：
    1：svg底色為灰色的圖；
    2：一個(gè)粉色的svg圖，當(dāng)我鼠標(biāo)hover到左邊粉色框時(shí)，粉色svg圖完全展開，初始為0；
    3：快速移動(dòng)的黃色小方塊；

其中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圖形的

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

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