#39 Card refrigerator adds power sensor, snowflake animation not displayed

[yumingjun1992]

Hello, your card is excellent. Recently, I successfully added the electric badge to the #39 refrigerator. However, its snowflake animation has disappeared. I have tried to fix it for a long time but failed to restore it. I hope you can help me check it again. Thank you very much.

yumingjun
@Anashost

---

Card

type: custom:mushroom-entity-card
entity: switch.sixwgh_cn_1169745456_v8icm1_on_p_2_1
tap_action:
  action: toggle
icon: mdi:fridge-industrial
icon_color: white
name: Refrigerator
grid_options:
  rows: auto
  columns: 12
card_mod:
  style:
    .: |
      ha-card {
        /* ================= USER CONFIGURATION ================= */
        {% set use_number      = false %}
        {% set state_entity    = 'switch.sixwgh_cn_1169745456_v8icm1_on_p_2_1' %}
        {% set active_value    = 'on' %}
        {% set number_entity   = 'sensor.sixwgh_cn_1169745456_v8icm1_electric_power_p_4_2' %}

        {# '>' '<' '=' '>=' '<=' #}
        {% set number_operator = '>' %}
        {% set threshold       = 0.0 %}
        
        {# 新增徽章配置（适配冰箱实体）- 包含耗电量 #}
        {% set max_watts = 2500 %}
        {% set show_ma = false %}
        {% set custom_msg = "MAX: 2500W" %}
        {% set theme_mode = 'dark' %}
        {% set card_height = '80px' %}
        {% set sensor_power =   'sensor.sixwgh_cn_1169745456_v8icm1_electric_power_p_4_2' %}
        {% set sensor_voltage = 'sensor.sixwgh_cn_1169745456_v8icm1_voltage_p_4_3' %}
        {% set sensor_current = 'sensor.sixwgh_cn_1169745456_v8icm1_electric_current_p_4_4' %}
        {% set sensor_consumption = 'sensor.sixwgh_cn_1169745456_v8icm1_power_consumption_p_4_1' %}  {# 耗电量实体 #}
        {% set color_plug = '76, 175, 80' %}
        {% set color_bar  = '76, 175, 80' %}
        {% set color_watts = '255, 152, 0' %}      {# 功率-橙色 #}
        {% set color_amps  = '33, 150, 243' %}      {# 电流-蓝色 #}
        {% set color_volts = '76, 175, 80' %}       {# 电压-绿色 #}
        {% set color_consumption = '233, 30, 99' %} {# 耗电量-粉色 #}
        {% set fs_icon   = '50px' %}
        {% set fs_main   = '15px' %}
        {% set fs_sec    = '12px' %}
        {% set fs_badges = '11px' %}  {# 缩小字号适配4个徽章 #}
        {% set fs_custom = '11px' %}
        /* ====================================================== */

        /* --- 原有逻辑引擎 --- */
        {% if use_number %}
          {% set num = states(number_entity) | float(0) %}
          {% if number_operator == '>' %} {% set active = (num > threshold) %}
          {% elif number_operator == '<' %} {% set active = (num < threshold) %}
          {% elif number_operator == '=' %} {% set active = (num == threshold) %}
          {% elif number_operator == '>=' %} {% set active = (num >= threshold) %}
          {% elif number_operator == '<=' %} {% set active = (num <= threshold) %}
          {% else %} {% set active = false %} {% endif %}
        {% else %}
          {% set active = states(state_entity) == active_value %}
        {% endif %}

        /* --- 新增徽章计算逻辑（包含耗电量） --- */
        {% if theme_mode == 'dark' %}
           {% set card_bg_color = '28, 28, 28' %}
           {% set color_text_main = '255, 255, 255' %}
           {% set color_text_sec  = '255, 255, 255' %}
           {% set color_text_msg  = '255, 255, 255' %}
        {% else %}
           {% set card_bg_color = '255, 255, 255' %}
           {% set color_text_main = '33, 33, 33' %}
           {% set color_text_sec  = '114, 114, 114' %}
           {% set color_text_msg  = '33, 33, 33' %}
        {% endif %}
        {% set watts = states(sensor_power) | float(0) | int %}
        {% set volts = states(sensor_voltage) | float(0) | int %}
        {% set amps  = states(sensor_current) | float(0) %}
        {% set consumption = states(sensor_consumption) | float(0) | round(2) %} {# 耗电量计算 #}
        {% if show_ma %}
            {% set str_amps = amps | int ~ " mA" %}
        {% else %}
            {% set str_amps = amps | round(2) ~ " A" %}
        {% endif %}
        {% set pct = (watts / max_watts * 100) | int %}
        {% set pct = 100 if pct > 100 else pct %}
        {% set str_watts = watts ~ " W" %}
        {% set str_volts = volts ~ " V" %}
        {% set str_consumption = consumption ~ " kWh" %} {# 耗电量显示文本 #}

        /* --- 定义CSS变量（新增耗电量） --- */
        --c-plug:  {{ color_plug }};
        --c-watts: {{ color_watts }};
        --c-amps:  {{ color_amps }};
        --c-volts: {{ color_volts }};
        --c-consumption: {{ color_consumption }}; {# 耗电量颜色 #}
        --c-bar:   {{ color_bar }};
        --c-txt-m: {{ color_text_main }};
        --c-txt-s: {{ color_text_sec }};
        --c-txt-c: {{ color_text_msg }};
        --v-watts: "{{ str_watts }}";
        --v-volts: "{{ str_volts }}";
        --v-amps:  "{{ str_amps }}";
        --v-consumption: "{{ str_consumption }}"; {# 耗电量文本 #}
        --v-custom: "{{ custom_msg }}";
        --fs-main:   {{ fs_main }};
        --fs-sec:    {{ fs_sec }};
        --fs-badges: {{ fs_badges }};
        --fs-custom: {{ fs_custom }};
        --fs-icon:   {{ fs_icon }};
        --bar-width: {{ pct }}%;
        --card-h: {{ card_height }};
        --card-b: {{ card_bg_color }};
        --badge-bg-opacity: 0.15;
        --badge-width: 55px;  {# 缩小宽度适配4个徽章 #}
        --badge-height: 20px;
        --badge-gap: 5px;     {# 缩小间距 #}
        {# 4个徽章位置计算（从右到左：耗电量→电压→电流→功率） #}
        --pos-1: 10px;        {# 耗电量（最右侧） #}
        --pos-2: calc(10px + var(--badge-width) + var(--badge-gap)); {# 电压 #}
        --pos-3: calc(10px + (var(--badge-width) * 2) + (var(--badge-gap) * 2)); {# 电流 #}
        --pos-4: calc(10px + (var(--badge-width) * 3) + (var(--badge-gap) * 3)); {# 功率（最左侧） #}

        /* --- 原有样式 --- */
        --card-bg: {{ 'linear-gradient(to bottom, #2C5364, #203A43, #0F2027)' if active else 'var(--ha-card-background, var(--card-background-color, white))' }};
        --card-shadow: {{ 'inset 0 0 30px rgba(200, 255, 255, 0.6)' if active else 'var(--ha-card-box-shadow, none)' }};
        --snow-display: {{ 'block' if active else 'none' }};
        --primary-text-color: {{ '#e0f7fa' if active else 'var(--primary-text-color)' }};
        --secondary-text-color: {{ '#b2ebf2' if active else 'var(--secondary-text-color)' }};
        --custom-icon-anim: {{ 'compressor-rumble 0.2s linear infinite' if active else 'none' }};
        --custom-icon-shadow: {{ '0 0 25px 5px rgba(255, 255, 255, 0.6)' if active else 'none' }};

        clip-path: inset(0 0 0 0 round var(--ha-card-border-radius,12px));
        background: var(--card-bg) !important;
        box-shadow: var(--card-shadow) !important;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        transition: all 0.5s ease;
        height: var(--card-h) !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* --- 雪花层 --- */
      ha-card .card-content::before {
        content: '';
        display: var(--snow-display);
        position: absolute;
        inset: 0;
        background-image: 
          radial-gradient(circle at 20px 30px, white 2px, transparent 3px),
          radial-gradient(circle at 50px 160px, white 2px, transparent 3px),
          radial-gradient(circle at 90px 40px, white 2px, transparent 3px),
          radial-gradient(circle at 130px 80px, white 2px, transparent 3px),
          radial-gradient(circle at 160px 120px, white 2px, transparent 3px),
          radial-gradient(circle at 240px 300px, white 2px, transparent 3px),
          radial-gradient(circle at 280px 100px, white 2px, transparent 3px);
        background-size: 300px 400px; 
        background-repeat: repeat;
        animation: snow-fall-layer1 10s linear infinite;
        opacity: 0.9;
        pointer-events: none;
        z-index: -1;
      }
      ha-card .card-content::after {
        content: '';
        display: var(--snow-display);
        position: absolute;
        inset: 0;
        background-image: 
          radial-gradient(circle at 10px 10px, rgba(255,255,255,0.7) 1px, transparent 2px),
          radial-gradient(circle at 30px 90px, rgba(255,255,255,0.7) 1px, transparent 2px),
          radial-gradient(circle at 80px 50px, rgba(255,255,255,0.7) 1px, transparent 2px),
          radial-gradient(circle at 110px 190px, rgba(255,255,255,0.7) 1px, transparent 2px),
          radial-gradient(circle at 150px 100px, rgba(255,255,255,0.7) 1px, transparent 2px),
          radial-gradient(circle at 220px 250px, rgba(255,255,255,0.7) 1px, transparent 2px);
        background-size: 300px 300px;
        animation: snow-fall-layer2 5s linear infinite;
        opacity: 0.6;
        pointer-events: none;
        z-index: 11;
      }

      /* --- 4个徽章样式（从右到左：耗电量→电压→电流→功率） --- */
      /* 1. 耗电量 (kWh) - 最右侧 */
      ha-card::before {
        content: var(--v-consumption) !important;
        background: color-mix(in srgb, rgb(var(--c-consumption)), transparent calc(100% - (var(--badge-bg-opacity) * 100)));
        border: 1px solid rgb(var(--c-consumption));
        color: rgb(var(--c-consumption));
        box-shadow: 0 0 6px 0 color-mix(in srgb, rgb(var(--c-consumption)), transparent 70%);
        position: absolute; top: 10px; right: var(--pos-1);
        width: var(--badge-width); height: var(--badge-height);
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        font-size: var(--fs-badges);
        font-weight: 700; 
        border-radius: 4px; 
        z-index: 5 !important;
      }
      /* 2. 功率 (W) - 最左侧 */
      ha-card::after {
        content: var(--v-watts) !important;
        background: color-mix(in srgb, rgb(var(--c-watts)), transparent calc(100% - (var(--badge-bg-opacity) * 100)));
        border: 1px solid rgb(var(--c-watts));
        color: rgb(var(--c-watts));
        box-shadow: 0 0 6px 0 color-mix(in srgb, rgb(var(--c-watts)), transparent 70%);
        position: absolute; top: 10px; right: var(--pos-4);
        width: var(--badge-width); height: var(--badge-height);
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        font-size: var(--fs-badges);
        font-weight: 700; 
        border-radius: 4px; 
        z-index: 5 !important;
      }

      /* --- 原有样式保留 --- */
      mushroom-shape-icon {
        --icon-size: 50px;
        display:flex;
        margin: px 0 10px -18px !important;
        padding-right: 15px;
        position: relative;
        z-index: 1;
      }
      .mushroom-state-info {
        position: relative;
        z-index: 1;
      }
      @keyframes snow-fall-layer1 {
        from { background-position: 0 0; }
        to   { background-position: 0 400px; }
      }
      @keyframes snow-fall-layer2 {
        from { background-position: 0 0; }
        to   { background-position: 0 300px; }
      }
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: var(--custom-icon-anim) !important;
        opacity: 1;
        overflow: visible !important;
      }
      @keyframes compressor-rumble {
        0% { transform: translate(0, 0); }
        25% { transform: translate(-1px, 0.5px); }
        50% { transform: translate(1px, -0.5px); }
        75% { transform: translate(-0.5px, 0.5px); }
        100% { transform: translate(0, 0); }
      }
    mushroom-state-item$: |
      .container::before {
        content: '';
        position: absolute;
        bottom: 0px; left: 0;
        width: var(--bar-width);
        height: 4px;
        background: rgb(var(--c-bar));
        box-shadow: 0 -1px 8px rgba(var(--c-bar), 0.5);
        border-bottom-left-radius: var(--ha-card-border-radius, 12px);
        border-bottom-right-radius: 0;
        transition: width 0.5s ease; z-index: 2;
      }
      /* 3. 电压 (V) - 右侧第二个 */
      .container::after {
        content: var(--v-volts) !important;
        background: color-mix(in srgb, rgb(var(--c-volts)), transparent calc(100% - (var(--badge-bg-opacity) * 100)));
        border: 1px solid rgb(var(--c-volts));
        color: rgb(var(--c-volts));
        box-shadow: 0 0 6px 0 color-mix(in srgb, rgb(var(--c-volts)), transparent 70%);
        position: absolute; top: 10px; right: var(--pos-2);
        width: var(--badge-width); height: var(--badge-height);
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        font-size: var(--fs-badges);
        font-weight: 700; 
        border-radius: 4px; 
        z-index: 5 !important;
      }
      /* 4. 电流 (A) - 右侧第三个 */
      .container::before {
        content: var(--v-amps) !important;
        background: color-mix(in srgb, rgb(var(--c-amps)), transparent calc(100% - (var(--badge-bg-opacity) * 100)));
        border: 1px solid rgb(var(--c-amps));
        color: rgb(var(--c-amps));
        box-shadow: 0 0 6px 0 color-mix(in srgb, rgb(var(--c-amps)), transparent 70%);
        position: absolute; top: 10px; right: var(--pos-3);
        width: var(--badge-width); height: var(--badge-height);
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        font-size: var(--fs-badges);
        font-weight: 700; 
        border-radius: 4px; 
        z-index: 5 !important;
        bottom: unset !important;
        left: unset !important;
        height: var(--badge-height) !important;
        width: var(--badge-width) !important;
      }
    mushroom-state-info$: |
      .primary {
        font-size: var(--fs-main) !important;
        color: rgb(var(--c-txt-m)) !important;
      }
      .secondary {
        font-size: var(--fs-sec) !important;
        color: rgb(var(--c-txt-s)) !important;
      }
      .container::after {
        content: var(--v-custom) !important;
        position: absolute; bottom: 8px; right: 10px;
        width: 200px; text-align: right;
        font-size: var(--fs-custom);
        font-weight: 600;
        color: rgba(var(--c-txt-c), 0.4);
        letter-spacing: 1px; z-index: 6;
      }

[Anashost]

ha-card::before and ha-card::after are used in card 39 for the snow flakes animations, you're now using them for the badges. its kinda tricky as you are using most mushroom css selectors, so nothing left for the snow animations. im workiong on a new advanced fridge card, hopfully will publish it soon.

[yumingjun1992]

Thank you very much