Question

我正在设计一个网站主题，我只能更改CSS，而不是JavaScript或HTML源代码。有一个div元素（不是链接），我想在点击时显示APNG（如动画GIF）背景图像。问题是鼠标按钮启动后div不会保持活动状态，因此动画通常没有机会进行播放。有没有办法阻止背景在延迟之后恢复正常状态？

我想也许CSS @keyframe动画可行，但我不确定。图像只是一个扩展的渐变，因此可以用图像替换图像（我认为图像更容易，因为渐变也不是可动画的。

Answer 1

您可以假冒点击并保持更改＆＃39;有效＆＃39;通过使用非常长的转换并调整初始和:active状态的转换延迟。

＆＃13;

.box {
  width:100px;
  height: 100px;
  border: 1px solid grey;
  margin: 1rem auto;
  background-color: #f00;
  transition-property: background-color;
  transition-duration: 9999s;
}

/*.box:hover,*/
.box:active {
  background-color: #00f;
  transition-duration: 0;
  transition-delay: 0s;
  transition-timing-function: linear;

}

＆＃13;

<div class="box"></div>

＆＃13;

在元素激活后，我可以强制背景图像停留一段时间吗？

1 个答案: