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

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

• 參考鏈接：詳情

區(qū)塊效果

共 361 人

如何使用

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

視頻教程

詳細介紹

難點

svg圖形的兩塊蒙版制作

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

 <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)頁版在線的，畫好后就可以右擊復(fù)制代碼了，是不是很簡單！?www.figma.com/

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

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

其中css處理最難的地方在于黃色svg和黃色svg蒙版的地方

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

move1是父元素蒙版的，movetwo是黃色svg圖形的

move1移動多遠，movetwo就移動相反的距離

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