Question

尝试仅使用CSS制作幻灯片，但似乎无法正常工作。这是CodePen。怎么了？有人可以帮忙吗？感谢。

body {
  background-color: #CCD19B;
  margin: 10px 50px 10px 50px;
}

/*////Nav bar////*/
.nav {
  width: 100%;
  display: flex;
  margin: 0 0 3em 0;
  padding: 0;
  text-align: center;
  align-content: right;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.nav a {
  flex: 1;
  padding: 18px 10px;
  text-decoration: none;
  color: #020303;
  font-family: "Trebuchet MS";
  list-style: none;
}

.nav a:hover {
  color: #BF250D;
}

#home {
  color: #DE940B;
}

/*.honey{
	width: 850px;
}

.chorizo{
	width: 850px;

}

.sheeps{
	width: 850px:;
}

.market{
	width: 850px;
}*/

.slideshow {
  width: 850px;
  height: 450px;
  overflow: hidden;
  position: relative;
}

.slideshow img {
  position: absolute;
  animation: fling-minislide 10s infinite;
  width: 100%;
  height: auto;
}

@keyframes slideshow {
  25% {
    opacity: 1
  }
  40% {
    opacity,
    0
  }
}

.slideshow img:nth-child(4) {
  animation-delay: 0s;
}

.slideshow img:nth-child(3) {
  animation-delay: 5s;
}

.slideshow img:nth-child(2) {
  animation-delay: 10s;
}

.slideshow img:nth-child(1) {
  animation-delay: 15s;
}

<html>

<head>
  <title>Good Stuff-If it's good its here</title>
  <link rel="icon" href="images/favicon-32x32.png" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>

<body>
  <nav>
    <div class="nav">
      <input type "search" placeholder="Search this Site">
      <ul class="container">
        <a id="home" href="#">Home</a>
        <a href="#">Recipes</a>
        <a href="#">Our Products</a>
        <a href="#">Portugal</a>
        <a href="#">Blog</a>
        <a href="#">Ingredients</a>
        <a href="#">Good Stuff</a>
      </ul>
    </div>
  </nav>

  <!-- Slide  -->
  <div class="slideshow">
    <img class="chorizo" src="https://images.unsplash.com/photo-1485921198582-a55119c97421?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c6d9cabdc7f046b490c67663caa3754e&auto=format&fit=crop&w=400&q=80" alt="chorizo">
    <img class="honey" src="https://images.unsplash.com/photo-1491374812364-00028bbe7d2f?ixlib=rb-0.3.5&s=e147a772ba0bbcf5f8176054af4f709d&auto=format&fit=crop&w=750&q=80" alt="honey">
    <img class="sheeps" src="https://images.unsplash.com/photo-1503767849114-976b67568b02?ixlib=rb-0.3.5&s=c9990db0eaf50beee4e5e8878de6d34d&auto=format&fit=crop&w=750&q=80" alt="sheeps">
    <img class="market" src="https://images.unsplash.com/photo-1503764654157-72d979d9af2f?ixlib=rb-0.3.5&s=004ac76e65f0b5708b0f04523ea9c6de&auto=format&fit=crop&w=753&q=80" alt="market">
  </div>

</body>
</html>

Answer 1

您的代码中存在一些类型错误。您正在为幻灯片显示使用不同的动画。

在此处更改此动画名称

.slideshow img {
  animation: fling-minislide 10s infinite;
}

到此

.slideshow img {
  animation: slideshow 10s infinite;
}

类型错误。

@keyframes slideshow {
  25% {
    opacity: 1
  }
  40% {
    opacity,
    0
  }
}

到此

@keyframes slideshow {
  25% {
    opacity: 1
  }
  40% {
    opacity: 0;
  }
}

以下是工作代码。

body {
  background-color: #CCD19B;
  margin: 10px 50px 10px 50px;
}

.nav {
  width: 100%;
  display: flex;
  margin: 0 0 3em 0;
  padding: 0;
  text-align: center;
  align-content: right;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.nav a {
  flex: 1;
  padding: 18px 10px;
  text-decoration: none;
  color: #020303;
  font-family: "Trebuchet MS";
  list-style: none;
}

.nav a:hover {
  color: #BF250D;
}

#home {
  color: #DE940B;
}

.slideshow {
  width: 850px;
  height: 450px;
  overflow: hidden;
  position: relative;
}

.slideshow img {
  position: absolute;
  animation: slideshow 10s infinite;
  width: 100%;
  height: auto;
}

@keyframes slideshow {
  25% {
    opacity: 1
  }
  40% {
    opacity: 0;
  }
}

.slideshow img:nth-child(4) {
  animation-delay: 0s;
}

.slideshow img:nth-child(3) {
  animation-delay: 5s;
}

.slideshow img:nth-child(2) {
  animation-delay: 10s;
}

.slideshow img:nth-child(1) {
  animation-delay: 15s;
}

<html>

<head>
  <title>Good Stuff-If it's good its here</title>
  <link rel="icon" href="images/favicon-32x32.png" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>

<body>
  <nav>
    <div class="nav">
      <input type "search" placeholder="Search this Site">
      <ul class="container">
        <a id="home" href="#">Home</a>
        <a href="#">Recipes</a>
        <a href="#">Our Products</a>
        <a href="#">Portugal</a>
        <a href="#">Blog</a>
        <a href="#">Ingredients</a>
        <a href="#">Good Stuff</a>
      </ul>
    </div>
  </nav>

  <!-- Slide  -->
  <div class="slideshow">
    <img class="chorizo" src="https://images.unsplash.com/photo-1485921198582-a55119c97421?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c6d9cabdc7f046b490c67663caa3754e&auto=format&fit=crop&w=400&q=80" alt="chorizo">
    <img class="honey" src="https://images.unsplash.com/photo-1491374812364-00028bbe7d2f?ixlib=rb-0.3.5&s=e147a772ba0bbcf5f8176054af4f709d&auto=format&fit=crop&w=750&q=80" alt="honey">
    <img class="sheeps" src="https://images.unsplash.com/photo-1503767849114-976b67568b02?ixlib=rb-0.3.5&s=c9990db0eaf50beee4e5e8878de6d34d&auto=format&fit=crop&w=750&q=80" alt="sheeps">
    <img class="market" src="https://images.unsplash.com/photo-1503764654157-72d979d9af2f?ixlib=rb-0.3.5&s=004ac76e65f0b5708b0f04523ea9c6de&auto=format&fit=crop&w=753&q=80" alt="market">
  </div>
</body>

</html>

CSS幻灯片无效

1 个答案: