Html 5幅图像上的过渡_Html_Css

Html 5幅图像上的过渡

html css

Html 5幅图像上的过渡,html,css,Html,Css,我被赋予以下任务我拥有的实际html:当用户悬停在前景图像上时，根据CSS规则，不透明度将在4秒内转换为0，并在一个周期内持续发生  <html> <head> <meta charset = "utf-8"> <title>Melting Images</title> <style type = "text/c

我被赋予以下任务

我拥有的实际html:当用户悬停在前景图像上时，根据CSS规则，不透明度将在4秒内转换为0，并在一个周期内持续发生

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

我必须做的修改：现在我必须对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>


熔化的图像
#掩护
{
位置：相对位置；
保证金：0自动；
}
#覆盖img
{
位置：绝对位置；
左：0；
-webkit过渡：易于输入输出；
过渡：不透明度4s易进易出；
}
#封面图片顶部：悬停
{不透明度：0；}

我试过的

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


熔化的图像
#掩护
{
位置：相对位置；
保证金：0自动；
}
#覆盖img
{
位置：绝对位置；
左：0；
-webkit过渡：易于输入输出；
过渡：不透明度4s易进易出；
}
#封面图片顶部：悬停
{不透明度：0；}
#封面图片top1：悬停
{不透明度：0；}
#封面图片top2：悬停
{不透明度：0；}
#封面图片top3：悬停
{不透明度：0；}

由于悬停是一个二进制过程（您可以悬停元素，也可以不悬停元素），因此仅使用CSS恐怕不可能做到这一点。您编写了一些JS代码，这些代码也将在悬停时触发，并负责替换下面的图像并对它们进行排序。然而，这似乎是一个丑陋的混乱

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

因此，我强烈建议您编写一个简单的JS图像淡入淡出器，它可以处理图像排序和淡入淡出动画，但性能稍有降低

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

您只能在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和html完全陌生。“不过，我也为其他厚客户工作过。”“宙斯，对不起，我们以为你知道小提琴是什么。在这种情况下，小提琴被非正式地视为一个项目。我只是尝试了小提琴，但对图像不感兴趣，我尝试了使用一些外部图像。看起来它没有出现。