关于mushroom和card-mod的图标旋转

s763279737

我给我的空调做了一个100级的风速调节，现在我想让图标旋转起来，并且旋转速度随风速大小变化。
但是我card-mod的代码试了很多种都没用，求大佬改正。

卡片的样子

原始代码：

type: custom:mushroom-number-card
entity: number.211106240247007_fan_speed
secondary_info: state
primary_info: none
layout: horizontal
visibility:
  - condition: state
    entity: climate.211106240247007_climate
    state_not: "off"

复制代码

deepseek给我的几种代码：

card_mod:
  style: |
    /* 定义旋转动画 */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    /* 根据风速动态设置旋转速度 */
    mushroom-shape-icon {
      {% set speed = states(entity) | int %}
      {% if speed > 0 %}
        animation: spin {{ (2.5 - (speed / 100) * 2) | round(1) }}s linear infinite;
      {% endif %}
    }

复制代码

card_mod:
  style: |
    /* 定义旋转动画 */
    @keyframes fan-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* 强制穿透所有层级并应用动画 */
    ha-card {
      --animation-duration: {{ (3 - (states(entity)|float/100)*2.5 | round(1) }}s;
    }
    
    mushroom-shape-icon {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
    
    mushroom-shape-icon > * {
      display: block !important;
      animation: fan-spin var(--animation-duration, 2s) linear infinite;
      animation-play-state: running;
      transform-origin: center center !important;
      {% if states(entity)|int == 0 %}
        animation: none !important;
      {% endif %}
    }

复制代码

s763279737

lswq 发表于 2025-5-29 17:06

没有用，因为这是个number实体而不是fan实体，所以我没法用蘑菇fan-card（并且蘑菇fan自带旋转），这堆代码在蘑菇number里没用

s763279737

hungheo 发表于 2025-5-29 20:20
楼主路径没找正确呀
这个是正常的示例：
速度根据自己需求来改

搞定了，选择器不对的原因。
最终这样搞定了。顺便问一下论坛里有没有变量、伪类、选择器的列表啊，我没有搜到。

type: custom:mushroom-number-card
entity: number.211106240247007_fan_speed
secondary_info: state
primary_info: none
layout: horizontal
visibility:
  - condition: state
    entity: climate.211106240247007_climate
    state_not: "off"
card_mod:
  style: |
    ha-state-icon {
      {% set speed = states('number.211106240247007_fan_speed') | int %}
      {% if speed > 0 %}
        animation: spin {{ (2.5 - (speed / 100) * 2) | round(1) }}s linear infinite;
      {% endif %}
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

复制代码

s763279737

bugensui 发表于 2025-5-29 15:12
什么空调能100级调风，一般不是3档吗

美的的大多数空调都可以啊