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

Question

好的，我用CSS3动画创建幻灯片效果，并且我试图在div中创建链接，该链接中包含随着每次过渡而向右滑动的文本，我希望每个幻灯片都具有不同的链接。 请帮忙，因为我需要这个网站尽快上线。 提前加油！

CSS / HTML

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

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

Answer 1

您正在使用

<li></li>

要建立链接，您必须使用锚标记：

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

Answer 2

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

Answer 3

您可以尝试使用标记将文本包装在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> 

Answer 4

 .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张幻灯片上的链接文本。