type
status
date
slug
summary
tags
category
icon
password
上方动画代码如下：
点击展开/折叠
更多类似动画请看下文，参考官方论坛（点击进入）
🍄mushroom标题动画
打字机动画
点击展开代码
放大淡出动画
点击展开代码
聚焦动画
点击展开代码
掉落动画
点击展开代码
闪烁动画
点击展开代码
滑入动画
点击展开代码
淡入动画
点击展开代码
🍄mushroom旋转图标
Comet Spinner
点击展开代码
Crescent Spinner
点击展开代码
Munch Spinner
点击展开代码
Double Spinner
点击展开代码
St. Nick Spinner
点击展开代码
Gradient Spinner
点击展开代码
Dots Spinner
点击展开代码
Radial Spinner
点击展开代码
Dual Spinner
点击展开代码
Morse Spinner
点击展开代码
Fade Spinner
点击展开代码
Dotty Spinner
点击展开代码
Plain Spinner
点击展开代码
Toggle Spinner
点击展开代码
Spheres Spinner
点击展开代码
Triple Spinner
点击展开代码
🍄mushroom点击动画
激活背景
点击展开代码
激活 Box-Shadow
点击展开代码
激活 Scale-Out
点击展开代码
激活 Scale-In
点击展开代码
激活 Push Down
点击展开代码
激活 Push In
点击展开代码
激活图标旋转
点击展开代码
激活 Ripple
点击展开代码
激活 3D 透视
点击展开代码
激活 3D Flap
点击展开代码
激活 3D 倾斜
点击展开代码
全局主题应用
点击展开代码
🍄mushroom图标动画PART1
内置旋转动画
点击展开代码
内置脉冲动画
点击展开代码
媒体播放器卡
点击展开代码
蘑菇气候卡
点击展开代码
煮沸动画
点击展开代码
Fire 动画
点击展开代码
淋浴动画
点击展开代码
喷水器动画
点击展开代码
洗衣机动画
点击展开代码
洗碗机动画
点击展开代码
烘干机动画
点击展开代码
提醒动画
点击展开代码
闹钟动画
点击展开代码
火箭动画
点击展开代码
喷泉动画
点击展开代码
运动动画
点击展开代码
齿轮动画
点击展开代码
信号动画
点击展开代码
警报动画
点击展开代码
控制台动画
点击展开代码
键盘动画
点击展开代码
眼睛动画
点击展开代码
摄像机动画1
点击展开代码
摄像机动画2
点击展开代码
电池动画1
点击展开代码
电池动画2
点击展开代码
扳手动画
点击展开代码
🍄mushroom图标动画PART2
Flash 动画
点击展开代码
充电动画
点击展开代码
双彩虹动画
点击展开代码
随机动画
点击展开代码
Sparkle 动画
点击展开代码
Eeeew 动画
点击展开代码
晴天动画
点击展开代码
多云动画
点击展开代码
小雨动画
点击展开代码
大雨动画
点击展开代码
龙卷风动画
点击展开代码
闪电动画
点击展开代码
晴天夜晚动画
点击展开代码
大风动画
点击展开代码
小风动画
点击展开代码
小雪动画
点击展开代码
大雪动画
点击展开代码
飓风动画
点击展开代码
雾霾动画
点击展开代码
大雾动画
点击展开代码
部分多云动画
点击展开代码
壁炉动画
点击展开代码
洗衣机动画2
点击展开代码
饭锅动画
点击展开代码
宁静动画
点击展开代码
音乐动画1
点击展开代码
音乐动画2
点击展开代码
列表动画
点击展开代码
颗粒动画
点击展开代码
焦点动画
点击展开代码
接入点动画
点击展开代码
警报动画
点击展开代码
录制动画
点击展开代码
心跳动画
点击展开代码
播放动画
点击展开代码
圣诞动画
点击展开代码
狗狗动画
点击展开代码
🍄mushroom图标动画PART3
HA 动画
点击展开代码
惊喜动画
点击展开代码
响铃动画
点击展开代码
定位动画
点击展开代码
节拍动画
点击展开代码
门动画
点击展开代码
弹跳动画
点击展开代码
幽灵动画
点击展开代码
鸭子动画
点击展开代码
机器人动画
点击展开代码
咖啡机动画
点击展开代码
APPLE动画
点击展开代码
内存动画
点击展开代码
水泵动画
点击展开代码
电源动画
点击展开代码
车库动画
点击展开代码
咖啡动画
点击展开代码
自动修复动画
点击展开代码
榨汁机动画
点击展开代码
太阳能动画
点击展开代码
灯泡动画
点击展开代码
灯光动画
点击展开代码
垃圾桶动画
点击展开代码
热泵动画
点击展开代码
空气净化器动画
点击展开代码
日历时钟动画
点击展开代码
电视动画
点击展开代码
微波炉动画
点击展开代码
🍄mushroom图标动画PART3
监视器动画
点击展开代码
邮件动画1
点击展开代码
邮件动画2
点击展开代码
圣诞动画2
点击展开代码
3D打印动画1
点击展开代码
3D打印动画2
点击展开代码
自动修复动画2
点击展开代码
汽车动画
点击展开代码
车库动画2
点击展开代码
🍄使用方法
控制 Card 中的动画
可以使用 animation 命令上的 Jinja Template 条件来控制动画。
例如，如果我想在咖啡机打开时制作动画，我会使用如下所示的 if 语句：
{{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}完整的卡片将如下所示：
咖啡机卡
或者，如果我想让烘干机在负载超过 4w 时动画，我会这样做：
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}完整的卡片将如下所示：
烘干卡
您需要在卡中为每个
animation: 、--icon-animation: 或 --shape-animation:命令添加 if 条件。将动画与 Tile 卡片一起使用
新 Tile Card 的结构与 Mushroom Cards 非常相似，因此很容易将这些动画与它一起使用。
蘑菇卡
平铺卡
动画瓦片卡
向Chips添加动画
向chips添加动画比普通蘑菇卡要复杂一些。您有 Chips（条状标签）的 'parent' （父项） 和多个 Chip （Chip） 'children'（子项）。可以以不同的方式应用于每个
card_mod。chip
最简单的方法是将
card_modclip-path添加到 Chip。这样做的缺点是我们无法直接处理图标，因此这些动画将不起作用，并且我们不能在 Chip 上有任何文本。这种方法也会破坏 Chips 的 GUI 编辑器，因此您必须使用 YAML 进行配置。chip动画
chips
更复杂但正确的方法是将 the 添加到 Chips（父级），然后对每个 Chip（子级）进行寻址。这是通过引用其中 x 是 Chip 的编号，是 Chip 的类型，例如模板、实体、光等。因此，如果我想引用第 5 个实体条状标签，我会使用第 2 个模板条状标签。此方法保留了 GUI 编辑器的功能。
card_modmushroom-<chip-type>-chip:nth-child(x)<chip-type>mushroom-entity-chip:nth-child(5)mushroom-template-chip:nth-child(2)chips动画
chips更改背景颜色
有关问题，欢迎您在底部评论区留言，一起交流~
- 作者:CHAOS
- 链接:https://tangly1024.com/article/haui8
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章
