bubble card配置分享（ios风格）

hungheo · 发表于 3 天前

本帖最后由 hungheo 于 2025-5-15 17:42 编辑

写在前面

bubble card是又爱又恨，感觉是吸收了button card、card-mod的很多功能，对比之前的browser-mod，确实很好用。
但是每个版本差异特别大，3.0又引入了很多功能，beta阶段问题一直不断。最近的beta.6又因为hacs或者版本控制的原因有可能会在加载的时候卡死。

不想搞这么复杂的，可以再等等插件作者发布稳定版！！！

2025-5-15更新
插件更新到beta.7，如果安装不了参考：https://github.com/Clooos/Bubble-Card/issues/1493

不用修改JS文件了，
主题文件添加以下任意CSS变量

bubble-backdrop-background-color: rgba(0,0,0,0.15) 
bubble-default-backdrop-background-color: rgba(0,0,0,0.15)

重载主题，搞定

0、效果截图

bubble主题

自定义主题

1、卡片配置

弹出卡片是先隐藏，再显示，即使隐藏的时候也有占位，所以最好放在最后。

详细配置：

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#zhuwo_presence" # 路径
    show_header: false
    margin_top_desktop: 10vh
    margin_top_mobile: 10vh
    hide_backdrop: false
    backdrop_blur: "0" #背景虚化，改了源代码，不会按照这个值设置
    bg_opacity: "40" # 内容卡片 透明度
    bg_blur: "10" # 内容卡片 虚化
    bg_color: "#ffffff" # 内容卡片 背景颜色
    shadow_opacity: "30" # 内容卡片 阴影
    modules:
      - default

2、JS文件修改

背景颜色'--bubble-backdrop-background-color'，是根据卡片背景色计算的，没办法单独设置，所以修改了源代码

虚化值也顺带修改成固定值了，UI配置里面设置了也没用

修改内容：

游客，如果您要查看本帖隐藏内容请回复

3、自定义主题

有些版本的css配置有差别，比如：
图标活动的背景色
2.4.0的是accent-color
3.0.0.beta.4的是--bubble-default-color: color-mix(in srgb, rgb(0, 155, 255) 70%, var(--primary-background-color, #ffffff) 30%)

发现主题效果没有发生变化的时候，需要自行查找修改。

主题配置文件放附件了

hungheo · 发表于 3 天前

4、主题背景图片制作
先放个截图

屏幕截图 2025-05-14 124349.png

找好图片，重命名bg.jpg
新建一个html文件（两者在同一目录下），复制以下内容，保存，再打开就可以截图了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>图片遮罩示例</title>
  <style>
    .image-container {
      position: relative;
      display: inline-block; 
    }

    /* 图片样式 */
    .image-container img {
      display: block; 
      width: 100%; 
      height: auto;
    }
    .mask1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.15); /* 第一层颜色 */
      backdrop-filter: blur(30px);  /*模糊效果 */
      z-index: 1; 
    }

    .mask2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.3); /* 第二层颜色 */
      backdrop-filter: blur(40px); /* 模糊效果 */
      z-index: 2; 
    }
  </style>
</head>
<body>
  <!-- 图片和遮罩层 -->
  <div class="image-container">
    <img src="bg.jpg" alt="示例图片" />
    <div class="mask1"></div>
    <div class="mask2"></div>
  </div>
</body>
</html>

Master · 发表于 3 天前

论坛有你更美丽

dengdeng6688 · 发表于 3 天前

iamhyde · 发表于 3 天前

感谢，学习下

zza774886285 · 发表于 3 天前

更新分享，学习下

take1943 · 发表于 3 天前

感谢，学习下

microsection · 发表于前天 11:14

感谢楼主分享

lc0888 · 发表于前天 12:04

感谢楼主分享

cokeii · 发表于昨天 00:04

感谢分享

		自动登录	找回密码
密码			立即注册

[UI界面] bubble card配置分享（ios风格）

评分