感谢天才stark的帮助，我能够成功创建一个在悬停时循环的工作图像。我决定坚持使用图像，因为它更容易使用而不是文本。关于这段代码，我还有一个问题。我试图使这些图像中的每一个都具有相应的背景，因此当用户的鼠标离开相应的图像时，背景也会改变。这是迄今为止的代码：
的jsfiddle： https://jsfiddle.net/XavierTheGreat/s16yz34o/7/
CSS
<style>
.hs-wrapper{
width: 1015px;
height: 408px;
position: relative;
margin: 0 auto;
overflow: hidden;
background:url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
}
.hs-wrapper img{
top: 0px;
left: 0px;
position: absolute;
-webkit-animation: showMe 0.8s linear infinite 0s forwards;
-moz-animation: showMe 0.8s linear infinite 0s forwards;
-o-animation: showMe 0.8s linear infinite 0s forwards;
-ms-animation: showMe 0.8s linear infinite 0s forwards;
animation: showMe 0.8s linear infinite 0s forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
.hs-wrapper img:nth-child(1){
z-index: 9;
}
.hs-wrapper img:nth-child(2){
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
z-index: 8;
}
.hs-wrapper img:nth-child(3){
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
z-index: 7;
}
.hs-wrapper img:nth-child(4){
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
z-index: 6;
}
.hs-wrapper img:nth-child(5){
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
z-index: 5;
}
.hs-wrapper img:nth-child(6){
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
z-index: 4;
}
.hs-wrapper img:nth-child(7){
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-nimation-delay: 0.6s;
animation-delay: 0.6s;
z-index: 3;
}
.hs-wrapper img:nth-child(8){
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
z-index: 2;
}
.hs-wrapper:hover img{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
.hs-overlay{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 500;
background: rgba(0,0,0,0.6);
pointer-events: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.hs-overlay span{
display: block;
padding: 20px;
position: absolute;
width: 293px;
left: 20px;
top: 200px;
color: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 38px;
border-style: none;
text-align: center;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hs-wrapper:hover .hs-overlay{
opacity: 1;
}
@-webkit-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-moz-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-o-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-ms-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
</style>
HTML
<section>
<div class="hs-wrapper">
<img src="http://farm2.staticflickr.com/1545/24610044154_20e82d4a01_o.jpg" alt="image01"/>
<img src="http://farm2.staticflickr.com/1677/25122429402_4983eefbd0_o.jpg" alt="image02"/>
<img src="http://farm2.staticflickr.com/1542/25240704165_73c03f1eff_o.jpg" alt="image03"/>
<img src="http://farm2.staticflickr.com/1447/24945094160_3c865f817b_o.jpg" alt="image04"/>
<img src="http://farm2.staticflickr.com/1545/24610044154_20e82d4a01_o.jpg" alt="image05"/>
<img src="http://farm2.staticflickr.com/1677/24610044594_f68cdd605c_o.jpg" alt="image06"/>
<img src="http://farm2.staticflickr.com/1693/24613897373_787d53a216_o.jpg" alt="image07"/>
<img src="http://farm2.staticflickr.com/1478/25147517251_68206c1e74_o.jpg" alt="image08"/>
</div>
</section>
那么这是可能的，或者我是否在CSS和HTML的范围内超支？我唯一能想到的就是使用mouseout事件，我见过的最接近的例子是由这个人做的：
Mouseout background animation - CSS
但是我不知道这对我的代码有什么用处。有任何想法吗？任何帮助表示赞赏。感谢。