关于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 %}
    }

复制代码

hungheo

楼主路径没找正确呀
这个是正常的示例：
速度根据自己需求来改

type: custom:mushroom-number-card
entity: input_number.test
icon: mdi:fan
card_mod:
  style: |
    ha-state-icon {
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

复制代码

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); }
    }

复制代码

bugensui

什么空调能100级调风，一般不是3档吗

ayuan2167

一直想弄个展示卡片一直没有成功用的也是deepseek

lswq

type: custom:mushroom-fan-card
entity: fan.dmaker_p28_89a8_fan
show_percentage_control: true
show_oscillate_control: false
card_mod:
  style: |
    ha-state-icon {
        animation: spin {{ 0 if (state_attr('fan.dmaker_p28_89a8_fan', 'percentage') == 0 or state_attr('fan.dmaker_p28_89a8_fan', 'percentage') is none) else (50 / state_attr('fan.dmaker_p28_89a8_fan', 'percentage')) }}s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

复制代码

s763279737

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

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

home_assistant

我写了一个，请参考。

type: custom:button-card
entity: input_number.my_slider
layout: custom
show_icon: false
show_name: false
name: " "
hold_action:
  action: none
styles:
  card:
    - display: flex
    - align-items: center
    - padding: 12px
    - width: 320px
  custom_fields:
    fan_icon:
      - width: 40px
      - height: 40px
      - position: absolute
      - left: 12px
      - color: teal
      - transform-origin: center
      - animation: |
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
      - animation: >
          [[[ 
            const speed = parseFloat(states['input_number.my_slider'].state);
            return speed > 0 ? `spin ${10 / speed}s linear infinite` : 'none'; 
          ]]]
    slider_container:
      - width: calc(100% - 68px)
      - margin-left: 56px
custom_fields:
  fan_icon: >
    <ha-icon icon="mdi:fan"></ha-icon>
  slider_container: >
    <div style="width: 100%;" onclick="event.stopPropagation()">
      <input type="range" min="0" max="100" step="1" 
        value="[[[ return states['input_number.my_slider'].state ]]]"
        style="width: 100%; cursor: pointer; accent-color: teal; border-radius: 8px; height: 8px;"
        oninput="
          const value = this.value;
          const hass = document.querySelector('home-assistant').hass;
          if (hass) {
            hass.callService('input_number', 'set_value', {
              entity_id: 'input_number.my_slider',
              value: Number(value)
            });
          }
        "
        onclick="event.stopPropagation()">
    </div>
card_mod:
  style: |
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    } 

复制代码

s763279737

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

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

hungheo

s763279737 发表于 2025-5-29 22:34
搞定了，选择器不对的原因。
最终这样搞定了。顺便问一下论坛里有没有变量、伪类、选择器的列表啊，我没 ...

我没在论坛里找到呀，
card-mod是接受jinja2模板，一般情况下问AI都能搞定
css的变量基本上都是颜色用的比较多，官网文档有介绍
伪类自己写的，我一般用before，after比较多，可以参考css教程
选择器，你可以参考参考我的另外一个帖子：https://bbs.hassbian.com/thread-27399-1-1.html

个人觉得，最自由的卡片还是得button card，想怎么设计都可以，而且JavaScript比jinja2更好看明白