Question

我制作了css动画横幅，结果可以在这里看到 http://nikatest.dlinkddns.com/webs/ypic/
问题是，对于一些图片，我想添加一个href链接，当我这样做弄乱动画，第一张图片有一个href属性，你可以看到它的较小，并没有适合相同的长度div，其他人在这里是HTML代码：< / p>

<header class="mainheader">

<div>
<img class='photo'  src="temp/temp/img/cut/camera.jpg" alt="camerra"/>
<img class='photo'  src="temp/temp/img/cut/girl.jpg" alt="asian student"/>
<img class='photo'  src="temp/temp/img/cut/kids.jpg" alt="campus kids"/>
<img class='photo'  src="temp/temp/img/cut/books.jpg" alt="books" onclick="javascript:location.href='http://www.flickr.com/photos/lemuelinchrist/2657001395/'" />
<img class='photo'  src="temp/temp/img/cut/field.jpg" alt="cambridge" onclick="javascript:location.href='http://www.flickr.com/photos/ericatkins/7927420108/'" />
<img class='photo'  src="temp/temp/img/cut/icl.jpg" alt="icl" onclick="javascript:location.href='http://www.flickr.com/photos/herry/2924207957/'" />
<img class='photo'  src="temp/temp/img/cut/math.jpg" alt="math" onclick="javascript:location.href='http://www.flickr.com/photos/featheredtar/76976279/'"/>
<img class='photo'  src="temp/temp/img/cut/student.jpg" alt="student" onclick="javascript:location.href='http://www.flickr.com/photos/merchau/8548057127/'"/>
<img class='photo'  src="temp/temp/img/cut/ucl.jpg" alt="ucl" onclick="javascript:location.href='http://www.flickr.com/photos/stevecadman/371199372/'"/>



</div>
<!--  <img src="temp/img/logo.gif">-->
</header>


</body>

我的临时文件夹中的css文件ypicstyle.css如下所示：

.mainheader div/*.container*/{
/*margin:50px auto;*/
width: 100%;
height: 300px;
margin: 2% 0;
/*width:500px;
height:300px;*/
overflow:hidden;
border:0px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:black;
border-right-color:#5d4426;
position:relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photo{
position:absolute;
width:100%;
height:auto;
-webkit-animation:round 36s infinite;
-moz-animation:round 36s infinite;
-ms-animation:round 36s infinite;
-o-animation:round 36s infinite;
animation:round 36s infinite;
opacity:0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

}

@keyframes round{
11.1%{opacity:1;}
/*25%{opacity:1;} */
22.2%{opacity:0;}
}

@-webkit-keyframes round{
11.1%{opacity:1;}
22.2%{opacity:0;}
}
img:nth-child(1){
/*animation-delay*/
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
img:nth-child(2){
/*animation-delay*/
-webkit-animation-delay:4s;
-moz-animation-delay:4s;
-ms-animation-delay:4s;
-o-animation-delay:4s;
animation-delay:4s;
}
img:nth-child(3){
/*animation-delay*/
-webkit-animation-delay:8s;
-moz-animation-delay:8s;
-ms-animation-delay:8s;
-o-animation-delay:8s;
animation-delay:8s;
}
img:nth-child(4){
/*animation-delay*/
-webkit-animation-delay:12s;
-moz-animation-delay:12s;
-ms-animation-delay:12s;
-o-animation-delay:12s;
animation-delay:15s;
}
img:nth-child(5){
/*animation-delay*/
-webkit-animation-delay:16s;
-moz-animation-delay:16s;
-ms-animation-delay:16s;
-o-animation-delay:16s;
animation-delay:16s;
}

img:nth-child(6){
/*animation-delay*/
-webkit-animation-delay:20s;
-moz-animation-delay:20s;
-ms-animation-delay:20s;
-o-animation-delay:20s;
animation-delay:20s;
}

img:nth-child(7){
/*animation-delay*/
-webkit-animation-delay:24s;
-moz-animation-delay:24s;
-ms-animation-delay:24s;
-o-animation-delay:24s;
animation-delay:24s;
}

img:nth-child(8){
/*animation-delay*/
-webkit-animation-delay:28s;
-moz-animation-delay:28s;
-ms-animation-delay:28s;
-o-animation-delay:28s;
animation-delay:28s;
}

img:nth-child(9){
/*animation-delay*/
-webkit-animation-delay:32s;
-moz-animation-delay:32s;
-ms-animation-delay:32s;
-o-animation-delay:32s;
animation-delay:32s;
}
/*<<<<<slider end>>>>>>>>>>*/

body {
/*    background-image: url('img/bg.jpg'); */
color: #000305; /*mostly black*/
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-allign: left;
background-color: #fff;
}

a {
text-decoration: none;
}

a:link, a:visited {
color: #26a4fb;
}

a:hover, a:active {
background-color: #26a4fb;
color: #FFF;
}

.body {
margin: 0 auto;
width: 70%;
clear: both;
}

.mainheader img {
width: inherit;
height: inherit;
margin: 2% 0; 
}

.mainheader nav {
background-color: #FFF;
opacity: 0.8;
height: 120px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

/*menu icon*/
#menu-icon {
display: none;
width: 10px;
height: 15px;
/*background: url('img/menu.jpg');
/*opacity: 0.1;*/
background-repeat: no-repeat;
}

我试图在这里正确地格式化它半小时但似乎没有工作...... 那么有人建议如何实现我的图片链接，而不会对CSS动画产生任何影响吗？谢谢你们：：：：：：：：：编辑：：：：：有谁能告诉我我做错了什么？也许我有动画定时关闭，也许那和其他东西，但我真的很沮丧，因为你可以看到如果你尝试的例子的网址，一些图片没有链接，有些做但但每当我点击它发送的任何图片我到最后一个链接。有人可以帮忙吗？

Answer 1

您还应该添加width：inherit和height：继承到元素，并查看它的位置。

Answer 2

另一种选择是使用这样的锚：

<a class='photo img1' href=''></a>
<a class='photo img2' href=''></a>

.photo {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url(image-link);
}

.photo.img1 {
    background-image: url(image-link-1);
}
.photo.img2 {
    background-image: url(image-link-2);
}

一个href混乱css动画

2 个答案: