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

要建立链接，您必须使用 anchor 标签:

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