主页 / 问题 / 1116058
Accepted
Алексей Соснин
Asked:2020-04-26 20:57:21 +0000 UTC2020-04-26 20:57:21 +0000 UTC

如何为css中的两个阴影设置两个不同的过渡时间？

  • 772

如何为css中的两个阴影设置两个不同的过渡时间？让两个阴影同时开始动画，但动画的持续时间不同？

  .game-item {
    transition box-shadow 0.3s, box-shadow 1s
  }

  .game-item:hover {
    box-shadow inset 0 0 0 0.15em blue, 0 0.5em 1em red
  }

使第一个阴影在 0.3 秒内出现，第二个在 1 秒内出现

css

2 个回答

  1. 显而易见的答案是：不可能，css 语法太差以至于无法描述它，你需要制作拐杖、包装器、javascript，但突然有人设法在纯 css 上做到了？=)
    阿列克谢·索斯宁

    不正确，语法css一点也不悲惨。例如，这可以通过使用规则的简单动画来解决@keyframes。见例子。两个动画同时开始。第一个阴影出现的动画持续为0.5s，第二个为3s。看起来第二个阴影出现的动画被延迟了（它不会与第一个同时开始），但事实并非如此，因为它的持续时间是第一个阴影的三倍。因此，产生了这种虚假的感觉。

    ...不喜欢我...
    Alexey Sosnin

    PS Alexey Sosnin，我在你的问题中读到了你对我的所有侮辱。对不起，但你错了。正如我在评论中写给你的那样，我从来没有也不会给任何人带来负面影响。这是关于答案的。至于问题，这种情况非常非常罕见。顺便说一句，我没有对你的问题和你的答案提出负面影响，这很容易检查。因此，请大家以后在发表评论时，尽量不要情绪化，不要使用脏话，更不要冒犯社区成员。谢谢你的理解！

    .game-item {
  box-sizing: border-box;
  margin: 40px auto;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.game-item:hover {
  animation: shadow 3s forwards;
}

@keyframes shadow {
  0% { box-shadow: 0 0 0 0em blue, 0 0 0 0em red; }
  15% { box-shadow: 0 0 0 1em blue, 0 0 0 1em red; }
  100% { box-shadow: 0 0 0 1em blue, 0 0 0 4em red; }
}
    <div class="game-item"></div>

    • 1
  2. Best Answer

    显而易见的答案是：不可能。css的语义比较差，无法描述，还需要做拐杖、包装器、javascript。Css 不允许你为多个属性设置不同的过渡，所以 box-shadow 属性的过渡是全局应用的，不管有多少阴影。

    这是一个带有伪类的拐杖：

    .game-item {
	margin: 40px auto;
	width: 100px;
	height: 100px;
	background-color: pink;
	position: relative;
	transition: box-shadow 3s;
}

.game-item:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	transition: box-shadow 0.5s;
}

.game-item:hover {
	box-shadow: 0 0 0 4em red;
}

.game-item:hover:before {
	box-shadow: 0 0 0 1em blue;
}
    <div class="game-item"></div>

    • -2

相关问题