主页 / 问题 / 1603004
Accepted
Alexandr_TT
Asked:2024-12-21 20:50:10 +0800 CST2024-12-21 20:50:10 +0800 CST

强制动画返回其原始值（背景颜色）

  • 772

我有一个盒子，我想让它闪烁。

  • 它应该不停地闪烁
  • 它从白色闪烁并返回到原始颜色
  • 每个循环之间必须有一个“暂停”（颜色保持不变）
  • 解决方案只有css，没有js

代码片段中的代码满足所有条件。 30% 和 70% 关键帧用于每个周期之间的暂停，保持完全绿色。它们之间闪烁着白色。

但此示例使用硬编码颜色。是否可以简单地为对象（此处为主体）设置颜色？然后盒子会闪烁白色并返回到原来的颜色，无论盒子当时是什么颜色。
不幸的是，在关键帧中使用“继承”或“初始”会将其恢复为白色。

body {
  animation: blink 3s infinite ease-in-out;
  background-color: green;
}

@keyframes blink {
  30% {background-color: green;}
  50% {background-color: white;}
  70% {background-color: green;}
}

@Maze 问题的免费翻译使动画返回初始值（背景颜色）。

html

4 个回答

  1. Best Answer

    我想，在这种情况下，变量就是“从大炮到麻雀”。该功能linear() 仅适用于最新版本的浏览器。

    revert-layer您可以使用返回到之前设置的值，而不是创新和复杂化：

    body {
  animation: blink 3s infinite ease-in-out;
  background-color: red;
}

@keyframes blink {
  30%, 70% { background-color: revert-layer; }
  50% { background-color: yellow; }
}

    颜色已更改以避免与默认白色混淆。

    • 3

  2. 您可以селекторе不直接在属性中选择颜色，而是在CSS переменные

    将相同的颜色应用于属性本身（变量）可以在ключевых кадрах.

    /* 是的，可以在以下任何选择器中轻松更改颜色（body:hover作为示例）。我在我的宠物项目中遵循 +- 这个原则langpack'и，并将它们交换在一起，为了好玩 */

    @keyframes blink {
  0% {background: var(--fill)}/* без этого кадра "сейчас", цвет фона не белел бы а отсутствовал
     что и видно при выборе черного цвета мерцания(body:hover) */
  30% {background: var(--fill)}
  50% {background: var(--blink)}
  70% {background: var(--fill)}
  100% {background: var(--fill)} /* см коммент к 0% */
}

body {
  animation: blink 3s infinite ease-in-out;
  --fill: green;
  --blink: white;
  position: absolute; inset: 0;
}

body:hover{
  --fill: pink;
  --blink: black;
}

    • 2

  3. 使用新的计时函数更简单的代码 linear()

    body {
  animation: blink 3s infinite linear(0, 0 30%, 1 50%, 0 70%, 0);
  background-color: green;
}

@keyframes blink {
  to {background-color: white;}
}

    成员 @Temani Afif的答案的免费翻译 。

    • 1

  4. 我不知道过渡颜色与预期的匹配程度如何，但我认为这是一个有趣的方法：

    html, body {
  height: 100%;
  margin: 0;
}

html {
  background: red;
}

body {
  animation: blink 3s infinite ease-in-out;
  background: transparent;
}

@keyframes blink {
    0% { background-color: transparent; }
   30% { background-color: green;       }
   50% { background-color: transparent; }
   70% { background-color: green;       }
  100% { background-color: transparent; }
}

    • 0

相关问题