CSS:当 image1 动画不合适时，一组图像会移动，而它们应该保留在原处

Question

我正在构建一个CSS灯箱画廊。我想使用 CSS 过渡动画来美化它的一部分操作。我试图做的是：当您将鼠标悬停在基本图像上时，它会用"脉冲"进行动画处理，让您知道您可以与之交互。当你点击它时，它会旋转、缩放并淡出向观众，就好像它正在变成一个信息块，这些信息块将在应该出现的灯箱中淡入。出现的盒子不仅仅是一个图像。它是带有图像的文本范围。然后，当您单击(X(关闭按钮或单击页面上的任意位置时，灯箱会突然消失而不会淡出，并且所有原始图像都已恢复到位。

实际发生的事情是你点击基础图像，它像它应该的那样旋转、缩放和淡入淡出，但在背景中，它右侧的其他图像滑动过来取代它的位置。然后，当您单击灯箱时，一切都恢复到位。我不希望其他图像移动并填充第一个图像的位置。如何防止所有内容移动，以便当您单击 image1 并且它以动画形式消失时，其他图像保持不变？这样，如果您单击图像2，图像3,4和5等，则不会滑动，或者其他什么。

我正在使用一些Javascript来实现我的点击动画，这是我从另一个回答的Stack Overflow问题中借用/学习的。如果你能找到更好的方法来实现我想要的，请帮助并添加它。

作为一个附带问题，我怎样才能使灯箱出现，以便如果您单击 (X( 关闭按钮或在文本框外部，它会关闭灯箱，但如果您在文本框内单击，则没有任何反应并且灯箱停留在原地？这样，人们可以根据需要单击并突出显示以复制文本框内的文本。

我

似乎无法通过片段代码重现任何点击动画，所以为了让你可以看到实际发生的事情，这里有一个指向我个人网络帐户上的原始测试代码的链接，你可以在其中看到实际的点击动画和出了什么问题：http://www.cafenocturne.com/testpage/biogallery/

这是我正在使用的代码片段。

$(window).load(function() {
  $(".ClickAnim").click(function() {
    $(this).addClass("rotOutZm");
    setInterval(function() {
      $(".ClickAnim").removeClass("rotOutZm");
    }, 2000);
  });
});

/* Just some base styles not needed for example to function */
*,
html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
  height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
body {
  background-color: #606061;
  color: WHITE;
  overflow: hidden;
}
img {
  border: none;
}
p {
  font-size: 12px;
  margin: 0 0 1em 0;
}
h2 {
  padding: 10px 0 0 20px;
}
.clear + h2 {
  padding: 0 0 0 20px;
}
.clear {
  height: 0 !important;
  line-height: 0 !important;
  clear: both !important;
  font-size: 1px !important;
  margin: 0;
  padding: 0;
  float: none !important;
}
/* animations */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*rotateOut+Zoom */
@keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
.rotOutZm {
  -webkit-transform-origin: center;
  -webkit-animation: rotOutZm forwards 1.8s;
  transform-origin: center;
  animation: rotOutZm forwards 1.8s;
}
/* pulse */
@-webkit-keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* fadeIn */
@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn1 {
  -webkit-animation-name: fadeIn1;
  animation-name: fadeIn1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/* Bio styles */
ul {
  padding: 20px 0 20px 20px;
  float: left;
}
ul li {
  display: inline-block;
  float: left;
  list-style: none;
  margin: 0 10px 0 0;
}
.pulse1:hover {
  -webkit-animation: pulse1 0.8s;
  /* Safari 4+ */
  -moz-animation: pulse1 0.8s;
  /* Fx 5+ */
  -o-animation: pulse1 0.8s;
  /* Opera 12+ */
  animation: pulse1 0.8s;
  /* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
  display: block;
  cursor: pointer;
}
ul li input {
  display: none;
}
ul li input:checked + .overlay {
  display: table;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}
.overlay label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.overlay img {
  display: inline;
  border: none;
  padding: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: WHITE;
}
.overlay label > img,
.content01 {
  border: 1px solid GRAY80;
  -moz-box-shadow: 5px 5px 10px BLACK;
  -webkit-box-shadow: 5px 5px 10px BLACK;
  box-shadow: 5px 5px 10px BLACK;
}
.content01 {
  display: block;
  width: 460px;
  padding: 20px;
  background: WHITE;
  color: BLACK;
  margin: 0 auto;
  text-align: left;
  cursor: auto;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.content01 .inner_content {
  display: block;
  height: 500px;
  overflow-y: auto;
}
.content01 .inner_content span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.overlay .inner_content {
  height: 265px;
}
.content01 img:first-child {
  float: left;
  display: block;
  margin: 0 10px 0 0;
}
.content01 img {
  float: right;
  margin: 0 10px;
  padding: 0;
}
input[id^='bio'] {
  cursor: pointer;
  height: 265px;
}
.content02 {
  width: 820px;
  padding: 0;
}
#close {
  display: none;
}
.closebutton {
  background: #606061;
  color: #FFFFFF;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -12px;
  width: 24px;
  border: 2px solid;
  border-color: #c18c8b #c05a58 #cc514e #a67776;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
  background: #f43530;
  text-shadow: 1px 1px 1px GRAY80;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
  <h2>Static Content</h2>
  <ul>
    <li>
      <label class="animated pulse1" for="bio">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
      </label>
      <input type="radio" id="bio" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
                            <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
    <li>
      <label class="animated pulse1" for="bio2">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
      </label>
      <input type="radio" id="bio2" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
							<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
  </ul>
  <div class="clear">&nbsp;</div>
  <input type="radio" id="close" name="Staff" />
</body>
</html>

Answer 1

我已经涉足了你的链接。如果您在包裹图像的 上放置宽度和高度(图像的宽度和高度相同(，它将保持空间在那里，而不是将下一个图像移动到其位置。

ul li label{
    width: 100px;
    height: 102px;
}