Question

我接受了以下任务，

我拥有的实际html：两个图像堆叠在一起。（在html下方）当用户在前景图像上悬停时，根据CSS规则，不透明度将转换为0在4秒内，这会在一个循环中发生。

我必须做的修改：现在我必须为5张图片执行相同操作。我尝试过如下所示，但是没有成功（参见第二段代码）。有关如何仅使用 css 进行此操作的任何提示？谢谢

 <!-- Melting one image into another using CSS3. -->
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
 #cover
 {
 position: relative;
 margin: 0 auto;
 }
 #cover img
 {
 position: absolute;
 left: 0;
 -webkit-transition: opacity 4s ease-in-out;
 transition: opacity 4s ease-in-out;
 }
 #cover img.top:hover
 { opacity:0; }
 </style>
 </head>
 <body>
 <div id = "cover">
 <img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
 <img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
 </div>
 </body>
 </html>

我尝试了什么

<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
 #cover
 {
 position: relative;
 margin: 0 auto;
 }
 #cover img
 {
 position: absolute;
 left: 0;
 -webkit-transition: opacity 4s ease-in-out;
 transition: opacity 4s ease-in-out;
 }
 #cover img.top:hover
 { opacity:0; }

 #cover img.top1:hover
 { opacity:0; }

 #cover img.top2:hover
 { opacity:0; }

 #cover img.top3:hover
 { opacity:0; }

 </style>
 </head>
 <body>
 <div id = "cover">
 <img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
 <img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
 <img class = "top1" src = "jhtp1.png" alt = "Java 8e cover">
 <img class = "top2" src = "jhtp2.png" alt = "Java 8e cover">
 <img class = "top3" src = "jhtp3.png" alt = "Java 8e cover">
 </div>
 </body>
 </html>

Answer 1

您只能在CSS中执行此操作，并将样式应用于容器和子项，无论这是什么。

我已经设置了一个使用div作为子项的示例，但您可以将其修改为您想要的任何内容

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
</div>

CSS

.container{
    width: 80px;
    height: 80px;
    position: relative;
}
.container div {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 60px;
    opacity: 0;
}
.container div:nth-child(1) {
    background-color: yellow;
    opacity: 1;
}
.container:hover div {
    -webkit-animation: anim 5s infinite; 
    animation: anim 5s infinite; 
}
.container div:nth-child(2) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
}
.container div:nth-child(3) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}
.container div:nth-child(4) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}
.container div:nth-child(5) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes anim {
    0%, 15% {opacity: 1;}
    20%, 95% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes anim {
    0%, 15% {opacity: 1;}
    20%, 95% {opacity: 0;}
    100% {opacity: 1;}
}

fiddle

Answer 2

由于悬停是一个二进制进程（你要么悬停一个元素，要么你不是），我担心只有CSS才能实现这一点。你编写了一些JS代码，它们在悬停时也是触发器，它将负责替换下面的图像并对它们进行排序。然而，这似乎是一个丑陋的混蛋。

也许你可以使用关键帧来做到这一点，但同样，你需要一种方法来触发每个图像的动画。我正在谈论为每个图像构建一个20秒的动画，然后以4秒的间隔修改每个图像的不透明度值。但同样，似乎太费力了。

所以，我强烈建议你写一个简单的JS图像推子，它会以很小的性能成本处理图像排序和淡入淡出动画。

如果您仍想使用尽可能多的CSS，请使用关键帧，并在容器元素上设置一个JS侦听器，它将为每个图像添加一个类 - 该类将触发每个图像的CSS动画。你必须重复第一张图片并把它放在底部。动画将使第一个图像透明，第二个4，第二个图像，第二个8，等等...

转换5张图片

2 个答案:

fiddle