仿哔哩哔哩充电区块 - WordPress区块

哔哩哔哩用户中心的侧边充电样式很是好看,当鼠标移动到左侧按钮图标上,右侧我就借鉴了一篇文章做了出来,变成一款区块,供大家使用

哔哩哔哩用户中心的侧边充电样式很是好看,当鼠标移动到左侧按钮图标上,右侧我就借鉴了一篇文章做了出来,变成一款区块,供大家使用。

仿哔哩哔哩充电区块 - WordPress区块-Npcink

区块效果

为TA充电

361

如何使用

点击下方的Demo按钮,右击鼠标查看源代码,根据代码注释复制代码到自己需要的地方,例如古登堡的HTML区块或是小工具里面的“自定义HTML”,另外,记得看代码注释哦(。・∀・)ノ

视频教程

详细介绍

难点

svg图形的两块蒙版制作

这里做的就是创建一个svg的图形,背景色是灰色,看着是不是很多很复杂,没事,这也不是我写的

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

仿哔哩哔哩充电区块 - WordPress区块-Npcink

既然svg图画好了,就要想怎么完成了

需要的东西:
    1:svg底色为灰色的图;
    2:一个粉色的svg图,当我鼠标hover到左边粉色框时,粉色svg图完全展开,初始为0;
    3:快速移动的黄色小方块;

其中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;
      }
    }

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 支付以后下载 请先登录登录 评论后刷新页面下载评论 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
WP区块

知乎添加收藏栏小工具区块 - WordPres区块

2020-9-4 20:52:45

WP区块

穿山甲大气卡片区块 - WordPress区块

2020-9-14 8:55:06

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
4 条回复 A文章作者 M管理员
  1. woctm

    御坂美琴nb😂

  2. zzc

    npc牛逼!

  3. 名器娘

    这个积分,我要分成~😎

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索