Question

遵循此https://jsfiddle.net/sergdenisov/wb28eeh2/3/尝试为我们的办公室间网站创建滚动新闻横幅。

我有兴趣制作图像可单击的链接，但是在图像周围添加所需的代码似乎会破坏它，并阻止横幅移动经过第一幅图像。

任何对此的建议将不胜感激！

/* Photo Banner */
.container {
    width: 100%;
    overflow: hidden;
    margin: 10px auto;
    background: white;
}

.photobanner, .photobanner2 {
    height: 233px;
    width: 3550px;
    margin-bottom: 5px;
    font-size: 0;
}

.photobanner img, .photobanner2 img {
	margin-bottom: 10px;
	margin-right: 5px;
	height: 233px;
	width: 350px;
}

.photobanner img  {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}


/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}
 
@keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-moz-keyframes bannermove {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-ms-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-o-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}

.second {
    -webkit-animation: bannermoves 30s linear infinite;
       -moz-animation: bannermoves 30s linear infinite;
        -ms-animation: bannermoves 30s linear infinite;
         -o-animation: bannermoves 30s linear infinite;
            animation: bannermoves 30s linear infinite;
}
 
@keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-moz-keyframes bannermoves {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-webkit-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-ms-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-o-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}

<div class="container">
    <div class="photobanner">
        <a href=""><img class="first" src="http://placehold.it/350x150">
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
        <a href=""><img src="http://placehold.it/350x150"></a>
    </div>
</div>

Answer 1

必须将.first和.last类从图像标签移动到锚定标签，动画才能正常工作（或者您可以更改CSS目标a而不是{{ 1}}）。在Chrome，Firefox和Edge中进行了测试。

img

/* Photo Banner */
.container {
    width: 100%;
    overflow: hidden;
    margin: 10px auto;
    background: white;
}

.photobanner, .photobanner2 {
    height: 233px;
    width: 3550px;
    margin-bottom: 5px;
    font-size: 0;
}

.photobanner img, .photobanner2 img {
	margin-bottom: 10px;
	margin-right: 5px;
	height: 233px;
	width: 350px;
}

.photobanner img  {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}


/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}
 
@keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-moz-keyframes bannermove {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-ms-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}
 
@-o-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2130px;}
}

.second {
    -webkit-animation: bannermoves 30s linear infinite;
       -moz-animation: bannermoves 30s linear infinite;
        -ms-animation: bannermoves 30s linear infinite;
         -o-animation: bannermoves 30s linear infinite;
            animation: bannermoves 30s linear infinite;
}
 
@keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-moz-keyframes bannermoves {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-webkit-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-ms-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}
 
@-o-keyframes "bannermoves" {
 0% {margin-left: -2130px;}
 100% {margin-left: 0px;}
}

将链接添加到“滚动图像横幅”会破坏它。

1 个答案: