Css 褪色图像网页设计身体{ 背景图片：url（“bg.jpg”）； } 保险商实验室{ 列表样式类型：无；填充：0；溢出：隐藏；背景色：#000000；左边距：100px； } 李{ 浮动：左； } 李阿{ 显示：块；颜色：白色；文本对齐：左对齐；填充：14px 16px；文字装饰：无； } 李娜：停下来{ 背景色：#000000； } img{ 位置：绝对位置；边缘顶部：10px；边框：1px实心#ccc； } img{ 宽度：100%；高度：自动； } img：第n种类型（2）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（3）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（4）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（5）{ -webkit动画：fadeInOut 15s线性5s无限； } @-webkit关键帧淡出{ 0%{不透明度：1；} 17%{不透明度：1；} 25%{不透明度：0；} 92%{不透明度：0；} 100%{不透明度：1；} } .图像包装器{ 位置：相对位置；高度：600px；//更改为任何适合您的 } .形象{ 位置：绝对位置；最高：50%；边框：1px实心#ccc；左：50%；转化：translateX（-50%）translateY（-50%）； } .container{宽度：1000px；} .logo{ 浮动：左；宽度：100px；高度：50px； } .nav{ 浮动：对；宽度：880px； } 坏蛋汉堡_Css

Css 褪色图像网页设计身体{ 背景图片：url（“bg.jpg”）； } 保险商实验室{ 列表样式类型：无；填充：0；溢出：隐藏；背景色：#000000；左边距：100px； } 李{ 浮动：左； } 李阿{ 显示：块；颜色：白色；文本对齐：左对齐；填充：14px 16px；文字装饰：无； } 李娜：停下来{ 背景色：#000000； } img{ 位置：绝对位置；边缘顶部：10px；边框：1px实心#ccc； } img{ 宽度：100%；高度：自动； } img：第n种类型（2）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（3）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（4）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（5）{ -webkit动画：fadeInOut 15s线性5s无限； } @-webkit关键帧淡出{ 0%{不透明度：1；} 17%{不透明度：1；} 25%{不透明度：0；} 92%{不透明度：0；} 100%{不透明度：1；} } .图像包装器{ 位置：相对位置；高度：600px；//更改为任何适合您的 } .形象{ 位置：绝对位置；最高：50%；边框：1px实心#ccc；左：50%；转化：translateX（-50%）translateY（-50%）； } .container{宽度：1000px；} .logo{ 浮动：左；宽度：100px；高度：50px； } .nav{ 浮动：对；宽度：880px； } 坏蛋汉堡

css

Css 褪色图像网页设计身体{ 背景图片：url（“bg.jpg”）； } 保险商实验室{ 列表样式类型：无；填充：0；溢出：隐藏；背景色：#000000；左边距：100px； } 李{ 浮动：左； } 李阿{ 显示：块；颜色：白色；文本对齐：左对齐；填充：14px 16px；文字装饰：无； } 李娜：停下来{ 背景色：#000000； } img{ 位置：绝对位置；边缘顶部：10px；边框：1px实心#ccc； } img{ 宽度：100%；高度：自动； } img：第n种类型（2）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（3）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（4）{ -webkit动画：fadeInOut 15s线性5s无限； } img：第n种类型（5）{ -webkit动画：fadeInOut 15s线性5s无限； } @-webkit关键帧淡出{ 0%{不透明度：1；} 17%{不透明度：1；} 25%{不透明度：0；} 92%{不透明度：0；} 100%{不透明度：1；} } .图像包装器{ 位置：相对位置；高度：600px；//更改为任何适合您的 } .形象{ 位置：绝对位置；最高：50%；边框：1px实心#ccc；左：50%；转化：translateX（-50%）translateY（-50%）； } .container{宽度：1000px；} .logo{ 浮动：左；宽度：100px；高度：50px； } .nav{ 浮动：对；宽度：880px； } 坏蛋汉堡,css,Css,嗨，我正试图在这4张图片之间淡出一个网站。目前为止很好，但是我试图修改这个代码。有人知道怎么做吗请更改代码，使每个图像在5秒后更改？任何帮助都是非常感激的正如litel所说，引导转盘非常适合您的示例。W3学校有一个很好的引导教程，这是我用来建立我的第一个旋转木马但是在你现在的环境中回答你的问题，我认为用一个简短的脚本比用CSS动画要容易得多。我在您的文档末尾添加了以下代码，这似乎满足了您的要求。希望有帮助 <!DOCTYPE html> <html lang="en-

嗨，我正试图在这4张图片之间淡出一个网站。目前为止很好，但是我试图修改这个代码。有人知道怎么做吗请更改代码，使每个图像在5秒后更改？任何帮助都是非常感激的

正如litel所说，引导转盘非常适合您的示例。W3学校有一个很好的引导教程，这是我用来建立我的第一个旋转木马

但是在你现在的环境中回答你的问题，我认为用一个简短的脚本比用CSS动画要容易得多。我在您的文档末尾添加了以下代码，这似乎满足了您的要求。希望有帮助

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>


body {
    background-image: url("bg.jpg");


}
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ul {
    list-style-type: none;

    padding: 0;
    overflow: hidden;
    background-color:  #000000;
    margin-left:100px;

}

li {
    float:left;


}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;



}

li a:hover {
    background-color:  #000000;

}


img {
    position: absolute;
   margin-top:10px;
    border: 1px solid #ccc;


}


img img {
    width: 100%;
    height: auto;



}

            img:nth-of-type(2){
                 -webkit-animation: fadeInOut 15s linear 5s infinite;

            }
            img:nth-of-type(3){
                 -webkit-animation: fadeInOut 15s linear 5s infinite;
            }
            img:nth-of-type(4){
                 -webkit-animation: fadeInOut 15s linear 5s infinite;
            }
            img:nth-of-type(5){
                 -webkit-animation: fadeInOut 15s linear 5s infinite;
            }




            @-webkit-keyframes fadeInOut{

            0% { opacity:1; } 
            17% { opacity:1; } 
            25% { opacity:0; } 
            92% { opacity:0; } 
            100% { opacity:1; }

            }
.image-wrapper {
  position: relative;
  height: 600px; // change to whatever works for you 
}

.image {
  position: absolute;
  top: 50%;
  border: 1px solid #ccc;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.container { width: 1000px; }
.logo { 
  float: left; 
  width: 100px;
  height: 50px;

}
.nav { 
  float: right; 
  width: 880px;

}


</style>

<title>Badass Burgers</title>

</head>
<body style="height:1500px">




  <img class="logo" src='logo.jpg'/>
<div class="container">


  <ul class="nav">

  <li><a class="active" href="homepage.php">Home</a></li>
    <li><a href="info.php">About</a></li>
  <li><a href="about.php">Team</a></li>
  <li><a href="Menu.php">Menu</a></li>
  <li><a href="book.php">Book A Table</a></li>
  <li><a href="message.php">Message Us</a></li>
</ul>
  <div style="clear: both"></div>
</div>
 <div class="image-wrapper">
    <img class="image" src='food1.jpg' width="1400" height="600" />
    <img class="image" src='Food2.jpg' width="1400" height="600" />
    <img class="image" src='Food3.jpg' width="1400" height="600" />
    <img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>


.图像包装器.图像{
显示：无；/*隐藏要开始的图像*/
}
var currentImage=0；
$（文档）.ready（函数（）{
imageChanger（）；/*第一个图像在页面就绪时淡入*/
设置间隔（图像转换器，5000）；}）/*为每个后续图像设置5000ms的计时器*/
函数imageChanger（）{
$（'.image wrapper img'）.eq（currentImage.fadeOut（）；
currentImage=（currentImage+1）%4；
$（'.image wrapper img'）.eq（currentImage.fadeIn（）；
}

如果您使用的是引导，为什么不使用旋转木马呢？我对css和引导非常陌生。你能解释一下引导程序文档吗。这是Bootstrap提供的众多功能之一，旨在消除创建这些元素的麻烦。

<style>
.image-wrapper .image{
    display: none; /*Hide the images to begin with*/
}
</style>
<script>
var currentImage = 0;
$(document).ready(function(){
imageChanger(); /*First image fades in on page ready*/
setInterval(imageChanger, 5000);}); /*set a timer of 5000ms for each subsequent image*/

function imageChanger(){
    $('.image-wrapper img').eq(currentImage).fadeOut();
    currentImage = (currentImage+1)%4;
    $('.image-wrapper img').eq(currentImage).fadeIn();
}
</script>