徽章如何实现图标动态显示

盗掘爱情

一直使用原生徽章的静态图标，开关可以实现颜色变化。最近想实现动态变化，但不会了。我现在有个风扇，打开状态时希望徽章图标也能跟着旋转，但貌似系统原生不支持，于是我用蘑菇主题添加到徽章，转倒是能转了，但是徽章大小与原生的不一样大，就很别扭。有没有办法能让原生徽章图标旋转或者让蘑菇卡片徽章大小跟原生一样大协调起来呢？

isw866

这就需要懂点css了，可以用css实现动画效果

hungheo

用card_mod,修改css，添加相应的动画呀

盗掘爱情

hungheo 发表于 2025-6-11 15:28
用card_mod,修改css，添加相应的动画呀

能具体说下么，card_mod是用在原生还是蘑菇啊？

hungheo

盗掘爱情 发表于 2025-6-11 16:52
能具体说下么，card_mod是用在原生还是蘑菇啊？

card_mod貌似对徽章不起作用呀
换成button card 吧

type: custom:button-card
entity: input_boolean.ceshi9
show_state: false
show_label: true
name: 名称
label: 这是label
icon: mdi:fan
tap_action:
  action: toggle
extra_styles: |
  @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }  
styles:
  grid:
    - grid-template-areas: |
        "i l"
        "i n"
    - grid-template-columns: 24px 1fr
    - grid-template-rows: 1fr 1fr
    - column-gap: 8px
  card:
    - height: 36px
    - border-radius: 18px
    - padding: 0px 8px
  name:
    - font-size: 12px
    - font-weight: bold
    - justify-self: flex-start
    - align-self: start
  label:
    - font-size: 10px
    - justify-self: flex-start
    - align-self: end
  icon:
    - width: 18px
    - color: green
    - animation: |
        [[[return entity && entity.state == "on" ? "spin 1s linear infinite" : "" ]]]

复制代码

盗掘爱情

hungheo 发表于 2025-6-11 18:02
card_mod貌似对徽章不起作用呀
换成button card 吧

button card也可以实现动态图标，但跟蘑菇一样，放到徽章栏里大小始终没法调整到跟徽章一样大，就跟我图中显示一样，总是比默认的徽章大一些，有什么办法能调整么？

hungheo

盗掘爱情 发表于 2025-6-11 18:05
button card也可以实现动态图标，但跟蘑菇一样，放到徽章栏里大小始终没法调整到跟徽章一样大，就跟我图 ...

我的上一个评论的代码就是调整好大小的呀，





name的font-weight记得改成500，我写成bold了

盗掘爱情

hungheo 发表于 2025-6-11 20:14
我的上一个评论的代码就是调整好大小的呀，

好的，我这试一下

tanbobo

不错 不错 已经受用

盗掘爱情

hungheo 发表于 2025-6-11 20:14
我的上一个评论的代码就是调整好大小的呀，

button-card的改好了，能再发下mushroom的代码吗？