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

好了，即时通过CSS3动画创建幻灯片效果，并且Im试图在包含向右滑动的文本的div中创建链接，当每次转换发生时我想要不同的链接每张幻灯片。请帮忙，因为我需要这个网站尽快上线。提前欢呼！CSS3动画，无法在动画div中创建链接

CSS/HTML

.slides { 
 
    height:420px; 
 
    margin:50px auto; 
 
    overflow:hidden; 
 
    position:relative; 
 
    width:100%; 
 
\t 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; 
 
\t 
 
} 
 
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div { 
 
    -webkit-animation-delay: 12.0s; 
 
    -moz-animation-delay: 12.0s; 
 
\t 
 
} 
 
.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; 
 
}

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

来源

2016-03-03 Sam Ogden-Palmer

你可能想看@ http://benschwarz.github.io/gallery-css/ – tayvano

您正在使用

<li></li>

为了让你不得不使用锚标签链接：

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

来源

2016-03-03 03:26:47

我知道，大声笑的问题是，当我添加一个achor标签链接只适用于最后一个文本出现（第四元素） –

@ SamOgden-Palmer如果您发布的代码**具有锚点，您将避免此类问题 – vals

我刚刚为每个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>

来源

2016-03-03 03:51:33 Sharon

您可以尝试包装的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>

来源

2016-03-03 03:53:15

.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>

如果您发现的问题是，当你点击任何链接都指向四号幻灯片的链接文字。

来源

2016-03-06 19:50:24

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

回答

相关问题