button card 动态图标分享 2024-09-24更新

hungheo

插座：插头进出动画，颜色变化

type: custom:button-card
entity: input_boolean.ceshi3
show_state: true
show_icon: false
show_name: true
name: 插座
styles:
  grid:
    - grid-template-areas: |
        "icon "
        "n"
        "s "
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr 20px 20px
  card:
    - width: 100px
    - height: 100px
    - padding: 5px
  name:
    - justify-self: start
    - padding-left: 5px
    - font-weight: bold
    - font-size: 14px
  state:
    - justify-self: start
    - padding-left: 5px
    - font-size: 12px
  custom_fields:
    icon:
      - width: 40px
      - padding-top: 5px
state:
  - value: 'off'
    styles:
      icon:
        - color: rgb(189, 189, 189)
      name:
        - color: rgb(189, 189, 189)
      state:
        - color: rgb(189, 189, 189)
custom_fields:
  icon: |
    [[[
      return `
        <svg viewBox="0 0 420 420">
          <style>
            @keyframes fadeInUp {
                0% {
                    opacity: 0;
                    transform: translateY(100%);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            @keyframes fadeOutDown {
                0% {
                    opacity: 1;
                    transform: translateY(0);
                }
                100% {
                    opacity: 0;
                    transform: translateY(100%);
                }
            }
            .on {
                animation: fadeInUp 1s forwards;
                fill: #5daeea
            }
            .off {
                animation: fadeOutDown 1s forwards; 
                fill: #bdbdbd
            }
          </style>
          <rect  x="100" y="43" width="300" height="300" rx="30"    fill="#bdbdbd"/>
          <rect  x="179" y="181" width="50" height="25" rx="12.5"    fill="#808080" />
          <rect  x="263" y="181" width="50" height="25" rx="12.5"    fill="#808080" />
          <path class="${entity.state}" d="M215 222.5C215 215.596 209.404 210 202.5 210C195.596 210 190 215.596 190 222.5L190 248L154 248L154 283L169 283L169 358C169 374.569 182.432 388 199 388L219 388L219 413L237 413L237 458L262 458L262 413L279 413L279 388L299 388C315.569 388 329 374.569 329 358L329 283L344 283L344 248L301 248L301 222.5C301 215.596 295.404 210 288.5 210C281.596 210 276 215.596 276 222.5L276 248L215 248L215 222.5Z" fill-rule="evenodd"  fill="#BDBDBD" />
        </svg>
      `;
    ]]]

复制代码

hungheo

人形闪烁图标：匹配状态闪烁动画，并改变颜色

type: custom:button-card
entity: input_boolean.ceshi3
name: 人形图标闪烁
show_icon: false
show_state: true
styles:
  grid:
    - grid-template-areas: |
        "icon n"
        "icon s"
    - grid-template-rows: min-content min-content
    - grid-template-columns: min-content min-content
  card:
    - height: 56px
    - padding: 10px
  name:
    - justify-self: start;
    - font-size: 14px
    - font-weight: 600
  state:
    - justify-self: flex-start
    - font-size: 12px
    - padding-bottom: 4px
  custom_fields:
    icon:
      - width: 30px
      - padding-left: 5px
      - padding-right: 8px
custom_fields:
  icon: |
    [[[
      return `
        <svg viewBox="0 0 25 25">
          <style>
            @keyframes blink-on {
              0%, 100% {
                opacity: 0.3;
                transform: scale(1);
              }
              50% {
                opacity: 1;
                transform: scale(1.1);
              }
            }
            .on {
              animation: blink-on 1s infinite;
              transform-origin: center;
              fill: #5daeea;
            }
          </style>
          <path fill="#9da0a2" class="${entity.state === 'on' ? 'on light-color' : 'light-color'}" d="M13.5,5.5C14.59,5.5 15.5,4.58 15.5,3.5C15.5,2.38 14.59,1.5 13.5,1.5C12.39,1.5 11.5,2.38 11.5,3.5C11.5,4.58 12.39,5.5 13.5,5.5M9.89,19.38L10.89,15L13,17V23H15V15.5L12.89,13.5L13.5,10.5C14.79,12 16.79,13 19,13V11C17.09,11 15.5,10 14.69,8.58L13.69,7C13.29,6.38 12.69,6 12,6C11.69,6 11.5,6.08 11.19,6.08L6,8.28V13H8V9.58L9.79,8.88L8.19,17L3.29,16L2.89,18L9.89,19.38Z"/>
        </svg>
      `;
    ]]]

复制代码