[英]CSS3 Left to right transition not working
我在尝试将图像从left (-700px)
移至居中位置(0px)
遇到了一个小问题。 我不确定自己在做什么错,因为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;}
}
再次,任何帮助!
您应该给出position: absolute;
如果要操纵left
属性(如在关键帧中所做的那样),请使用: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>
使用!important覆盖样式。 这可能有效
好吧,如果问题出在边距上,请尝试以下操作:
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
其中translate()函数的第一个参数是x偏移量,第二个参数是y偏移量。 如果那不起作用,那么您至少知道边距不是问题^^
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.