CSS:当 image1 动画不合适时，一组图像会移动，而它们应该保留在原处
CSS: Set of images move over when image1 animates out of place when they should stay where they are
我正在构建一个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"> </div>
<input type="radio" id="close" name="Staff" />
</body>
</html>我已经涉足了你的链接。如果您在包裹图像的 上放置宽度和高度(图像的宽度和高度相同(，它将保持空间在那里，而不是将下一个图像移动到其位置。
ul li label{
width: 100px;
height: 102px;
}
相关文章：
- 分派点击事件并保留击键修饰符
- Canvas Html5绘图应用程序，移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在剪切/粘贴/移动后在contentEditable DIV中保留与XML相关的数据
- 如何在从剃刀视图移动内联JavaScript时保留相对URL
- 保留 Azure 移动服务的自定义 API 调用的用户身份验证
- 保留列表中移动元素的顺序
- 单击以关闭移动设备上的jQuery下拉菜单，同时保留其他行为
- 如何在保留鼠标/元素坐标访问权限的同时将鼠标移动更改为 setInterval
- 我可以将字段保留在填充的表单中，即使我移动到其他页面然后返回
- CSS:当 image1 动画不合适时，一组图像会移动，而它们应该保留在原处
- 页面刷新或移动到另一页后保留setTimeout(）
- 在移动中添加按钮时保留jQuery功能
- 防止移动默认键盘同时保留文本插入光标
- 我的代码是否有任何错误，不允许在关闭应用程序后在移动浏览器上保留cookie
- 在DOM中移动控制器时保留元素/作用域状态
- 如何保留组合框选定的背景颜色，内部网格面板一旦移动到下一行.或者可以说集中注意力
- 移动应用程序的表视图中附加的行必须永久保留(钛)
- 当我们从一个弹出窗口移动到另一个弹出窗口时，滚动条的位置不会保留
- 如何在将组件实例移动到react中的另一个父组件时保留它
