CSS3动画，无法在动画div中创建链接

时间：2016-03-03 03:23:56

标签： html html5 css3

好吧我正在使用CSS3动画创建幻灯片效果，我试图在div中创建链接，其中包含每次转换发生时向右滑动的文本我想为每张幻灯片添加不同的链接。请帮忙，因为我需要这个网站尽快上线。提前喝彩！

CSS / HTML

＆＃13;
＆＃13; 
.slides {
    height:420px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:100%;
	max-width: 1150px;
}
.slides ul {
    list-style:none;
    position:relative;
}


@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li  {
    opacity:0;
    position:absolute;
    top:0;

  
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 16.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 16.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 4.0s;
    -moz-animation-delay: 4.0s;
}



.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 8.0s;
    -moz-animation-delay: 8.0s;
	
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
	
}
.slides ul li img{
    display:block;
}


@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:60%;
        opacity:0;
    }
    20% {
        left:60%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:1;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:60%;
        opacity:1;
    }
    20% {
        left:60%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}




.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:60%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;


    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 16.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 16.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
＆＃13; 
				<div class="slides">
				
				
					<ul> <!-- slides -->
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
							<div class="hvr-back-pulse">Book a Demo...</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
							<div class="hvr-back-pulse">Find Out More...</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
							<div class="hvr-back-pulse">Promo text #3</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
							<div class="hvr-back-pulse">Promo text #4</div>
						</li>
					</ul>
				</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

您正在使用

<li></li>

要制作链接，您必须使用锚标记：

<a href="web address of your link (url)"></a>

答案 1 :(得分：0)

我刚添加了每个div的链接。

Here is a working demo 

<div class="slides">
                <ul> <!-- slides -->
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
                        <div class="hvr-back-pulse"><a href="http://www.google.com">Book a Demo...</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Find Out More...</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Promo text #3</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Promo text #4</a></div>
                    </li>
                </ul>
            </div>

答案 2 :(得分：0)

您可以尝试使用标记将div中的文本包装起来并链接它们。 

<div class="slides">


  <ul>
    <!-- slides -->
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
      <div class="hvr-back-pulse"><a href="link1">Book a Demo...</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
      <div class="hvr-back-pulse"><a href="link2">Find Out More...</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
      <div class="hvr-back-pulse"><a href="link3">Promo text #3</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
      <div class="hvr-back-pulse"><a href="link4">Promo text #4</a>
      </div>
    </li>
  </ul>
</div>

答案 3 :(得分：0)

.slides {

  height: 420px;

  margin: 50px auto;

  overflow: hidden;

  position: relative;

  width: 100%;

  max-width: 1150px;

}

.slides ul {

  list-style: none;

  position: relative;

}

@-webkit-keyframes anim_slides {

  0% {

    opacity: 0;

  }

  6% {

    opacity: 1;

  }

  24% {

    opacity: 1;

  }

  30% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@-moz-keyframes anim_slides {

  0% {

    opacity: 0;

  }

  6% {

    opacity: 1;

  }

  24% {

    opacity: 1;

  }

  30% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.slides ul li {

  opacity: 0;

  position: absolute;

  top: 0;

  -webkit-animation-name: anim_slides;

  -webkit-animation-duration: 16.0s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-direction: normal;

  -webkit-animation-delay: 0;

  -webkit-animation-play-state: running;

  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_slides;

  -moz-animation-duration: 16.0s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  -moz-animation-direction: normal;

  -moz-animation-delay: 0;

  -moz-animation-play-state: running;

  -moz-animation-fill-mode: forwards;

}

.slides ul li:nth-child(2),

.slides ul li:nth-child(2) div {

  -webkit-animation-delay: 4.0s;

  -moz-animation-delay: 4.0s;

}

.slides ul li:nth-child(3),

.slides ul li:nth-child(3) div {

  -webkit-animation-delay: 8.0s;

  -moz-animation-delay: 8.0s;

}

.slides ul li:nth-child(4),

.slides ul li:nth-child(4) div {

  -webkit-animation-delay: 12.0s;

  -moz-animation-delay: 12.0s;

}

.slides ul li img {

  display: block;

}

@-webkit-keyframes anim_titles {

  0% {

    left: 100%;

    opacity: 0;

  }

  5% {

    left: 60%;

    opacity: 0;

  }

  20% {

    left: 60%;

    opacity: 1;

  }

  25% {

    left: 100%;

    opacity: 1;

  }

  100% {

    left: 100%;

    opacity: 0;

  }

}

@-moz-keyframes anim_titles {

  0% {

    left: 100%;

    opacity: 0;

  }

  5% {

    left: 60%;

    opacity: 1;

  }

  20% {

    left: 60%;

    opacity: 1;

  }

  25% {

    left: 100%;

    opacity: 0;

  }

  100% {

    left: 100%;

    opacity: 0;

  }

}

.slides ul li div {

  background-color: #000000;

  border-radius: 10px 10px 10px 10px;

  box-shadow: 0 0 5px #FFFFFF inset;

  color: #FFFFFF;

  font-size: 26px;

  left: 60%;

  margin: 0 auto;

  padding: 20px;

  position: absolute;

  top: 50%;

  width: 200px;

  -webkit-animation-name: anim_titles;

  -webkit-animation-duration: 16.0s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-direction: normal;

  -webkit-animation-delay: 0;

  -webkit-animation-play-state: running;

  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_titles;

  -moz-animation-duration: 16.0s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  -moz-animation-direction: normal;

  -moz-animation-delay: 0;

  -moz-animation-play-state: running;

  -moz-animation-fill-mode: forwards;

}
<html>

<head>
</head>

<body>

  <div class="slides">


    <ul>
      <!-- slides -->
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
        <div class="hvr-back-pulse"><a href="1" class="demo">Book a Demo...</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
        <div class="hvr-back-pulse"><a href="2" class="demo">Find Out More...</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
        <div class="hvr-back-pulse"><a href="3" class="demo">Promo text #3</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
        <div class="hvr-back-pulse"><a href="4" class="demo">Promo text #4</a>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

如果您发现问题是当您点击任何链接时，它们都指向第4张幻灯片上的链接文本。

相关问题
最新问题