时间戳

首页 > 解决方案 > 如何通过单击 image3 来影响两个元素（image1 和 image2）

html - 如何通过单击 image3 来影响两个元素（image1 和 image2）

问题描述

我有一个不能使用 Javascript 的学校项目。只是HTML和CSS。主题是Lucky Luke，我正在尝试制作动画，每当我单击另一个对象时，他就会在其中拍摄。

这个想法是让两张图像相互叠加，其中一张不可见，而另一张在我拍摄物体时可见，我点击的物体是触发器。

然后，这两个图像应在短时间内恢复到其原始不透明状态。

#luckyStand {
  position: absolute;
  opacity: 1;
  bottom: 0;
  left: -250px;
}

#luckyShoot {
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: -250px;
}

#db1 {
  position: absolute;
  top: 165px;
  right: 370px;
}

#db1:target~#luckyShoot {
  opacity: 1;
}
<div id="db1">
  <a href="#db1">
    <img src="images/dalton_brother1.png">
  </a>
</div>

<div id="luckyStand">
  <img src="images/lucky_luke_idle.png">
</div>

<div id="luckyShoot">
  <img src="images/lucky_luke_shooting.png">
</div>

标签： htmlcss

解决方案

您可能想使用关键帧动画：

#luckyShoot {
  opacity: 0;
  animation-duration: 2s;         /* length of time to show the element before it disappears again */
  animation-fill-mode: forwards;
}

#db1:target~#luckyShoot {
  animation-name: fadeInOut;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;  /* will show immediately */
  }
  99% {
    opacity: 1;  /* for 99% of the animation duration (2s) */
  }
  100% {
    opacity: 0;  /* will hide at the end */
  }
}
<div id="db1">
  <a href="#db1">
    <img src="images/dalton_brother1.png">
  </a>
</div>

<div id="luckyStand">
  shown
</div>

<div id="luckyShoot">
  start hidden
</div>

推荐阅读