我在尝试将图像从左侧 (-700px) 移动到中心位置 (0px) 时遇到了一些问题。我不能 100% 确定我在这里做错了什么，因为 transition 本身不起作用。我必须保持 HTML 的原始结构(如果可能的话)。我在背景颜色上应用了不同的动画，这似乎有效，所以我认为这可能是由于边距或类似的原因。我对 CSS 动画相当陌生，并且我知道使用 jQuery 可以更有效地完成此操作(相信我)。如果有人可以提供任何意见，请告诉我，或者如果您需要更多信息，也请告诉我!
这是 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CS 350 - Lab #5</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<h1 id="title">Image Gallery</h1>
<div id="mygallery">
<ul id="full-image">
<li id="desert">
<img src="./images/desert.jpg" alt="desert"/>
<p><span>Desert</span></p>
</li>
<li id="koala">
<img src="./images/koala.jpg" alt="koala">
<p><span>Koala</span></p>
</li>
<li id="lighthouse">
<img src="./images/lighthouse.jpg" alt="lighthouse">
<p><span>Lighthouse</span></p>
</li>
<li id="penguins">
<img src="./images/penguins.jpeg" alt="penguins">
<p><span>Penguins</span></p>
</li>
</ul>
<ul id="thumb-image">
<li>
<a href="#desert">
<img src="./images/desert.jpg" alt="desert">
</a>
</li>
<li>
<a href="#koala">
<img src="./images/koala.jpg" alt="koala">
</a>
</li>
<li>
<a href="#lighthouse">
<img src="./images/lighthouse.jpg" alt="lighthouse">
</a>
</li>
<li>
<a href="#penguins">
<img src="./images/penguins.jpeg" alt="penguins">
</a>
</li>
</ul>
</div>
</body>
</html>
还有 CSS:
body {
background-color: #d9d6cb;
}
#title {
font-family: Agency FB;
text-shadow: 2px 2px #F1F1F1;
text-align: center;
}
#mygallery {
width: 580px;
height: 480px;
margin: auto;
padding: 20px;
background-color: #000000;
}
#full-image {
list-style: none;
width: 580px;
height: 400px;
margin: 0px;
padding: 0px;
overflow: hidden;
position: relative;
}
#full-image img {
width: 580px;
}
:target {
animation: slideImage 2s;
-webkit-animation: slideImage 2s;
-moz-animation: slideImage 2s;
}
#thumb-image {
list-style: none;
overflow: auto;
}
#thumb-image img {
width: 50px;
height: 50px;
float: right;
margin-left: 5px;
border: 1px solid #ffffff;
opacity: 0.5;
}
#thumb-image img:hover {
opacity: 1;
}
#thumb-image li {
position: relative;
}
@-webkit-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@-moz-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
再说一次，任何事情都有帮助!
最佳答案
如果您想操作 left 属性(就像在关键帧中那样)，您应该将 position:absolute; 赋予 :target 。这是工作示例:
body {
background-color: #d9d6cb;
}
#title {
font-family: Agency FB;
text-shadow: 2px 2px #F1F1F1;
text-align: center;
}
#mygallery {
width: 580px;
height: 480px;
margin: auto;
padding: 20px;
background-color: #000000;
}
#full-image {
list-style: none;
width: 580px;
height: 400px;
margin: 0px;
padding: 0px;
overflow: hidden;
position: relative;
}
#full-image img {
width: 580px;
}
:target {
position: absolute;
animation: slideImage 2s;
-webkit-animation: slideImage 2s;
-moz-animation: slideImage 2s;
}
#thumb-image {
list-style: none;
overflow: auto;
}
#thumb-image img {
width: 50px;
height: 50px;
float: right;
margin-left: 5px;
border: 1px solid #ffffff;
opacity: 0.5;
}
#thumb-image img:hover {
opacity: 1;
}
#thumb-image li {
position: relative;
}
@-webkit-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@-moz-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}<body>
<h1 id="title">Image Gallery</h1>
<div id="mygallery">
<ul id="full-image">
<li id="desert">
<img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="desert"/>
<p><span>Desert</span></p>
</li>
<li id="koala">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="koala">
<p><span>Koala</span></p>
</li>
<li id="lighthouse">
<img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="lighthouse">
<p><span>Lighthouse</span></p>
</li>
<li id="penguins">
<img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="penguins">
<p><span>Penguins</span></p>
</li>
</ul>
<ul id="thumb-image">
<li>
<a href="#desert">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="desert">
</a>
</li>
<li>
<a href="#koala">
<img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="koala">
</a>
</li>
<li>
<a href="#lighthouse">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="lighthouse">
</a>
</li>
<li>
<a href="#penguins">
<img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="penguins">
</a>
</li>
</ul>
</div>
</body>关于html - CSS3 从左到右的过渡不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46483224/