CSS 关键帧动画

Question

我有一点 HTML 和 CSS 的基本知识，并试图实现自动幻灯片放映的关键帧动画。我复制了一个教程，效果非常好，但我自己很难配置它。

html & CSS 是：

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('/assets/images/jack-test/beatles-one.jpg');
}

@keyframes slideBg {
  0% {
    background-image: url('/assets/images/jack-test/beatles-oone.jpeg');
  }
  25% {
    background-image: url('/assets/images/jack-test/beatles-two.jpeg');
  }
  50% {
    background-image: url('/assets/images/jack-test/jimi-hendix.jpeg');
  }
  75% {
    background-image: url('/assets/images/jack-test/led-zeppelin.jpeg');
  }
  100% {
    background-image: url('/assets/images/jack-test/rock-band.jpeg');
  }
}

<div id="SLIDE_BG"></div>

Answer 1

你需要给图片路径正确检查下面

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('https://dummyimage.com/800x300');         
}

@keyframes slideBg {
  0% {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/29/Dscn7471_sunset-sundog_crop_800x300.jpg');
  }
  25% {
    background-image: url('https://www.thegrandsiba.com/wp-content/uploads/2017/06/MG_28423-800x300.jpg');
  }
  50% {
    background-image: url('https://dummyimage.com/800x300');
  }
  75% {
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5e2a19d4-f261-4548-b4a7-1e2f5ad139af/d99najf-e9049704-bfc4-4836-952d-9315403bd60f.gif');
  }
  100% {
    background-image: url('https://www.businessclass.co.uk/wp-content/uploads/sites/11/2016/04/Toronto-800x300-800x300.jpg');
  }
}

Answer 2

您必须使用 url（在线托管）才能使用 background-image。如果您使用的是本地电脑而不是您不能使用它，您有图像要在线托管或在同一文件夹中。

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: slideBg 8s linear infinite 0s;
  animation-timing-function: ease-in-out;
  background-image: url('https://jooinn.com/images/dramatic-landscape-7.jpg');
}

@keyframes slideBg {
  0% {
    background-image: url('https://jooinn.com/images/dramatic-landscape-7.jpg');
  }
  25% {
    background-image: url('http://www.thewowstyle.com/wp-content/uploads/2015/01/nature-image.jpg');
  }
  50% {
    background-image: url('https://images.designtrends.com/wp-content/uploads/2016/01/04085621/A-Cold-Sunset-Background.jpg');
  }
  75% {
    background-image: url('https://jooinn.com/images/hdr-landscape-1.jpg');
  }
  100% {
    background-image: url('https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2016/03/fall-trees-road-1.jpg');
  }
}

<div id="SLIDE_BG"></div>

更新：

也可以在PC端使用图片的本地路径，有一点要记住：

如果它保存在保存 HTML 文件的同一驱动器 (C: D: .....) 中，则使用完整路径 background-image: url('') 以驱动器名称开头，即 C:/folder1/..../image.png .
如果图像保存在保存 HTML 文件的同一文件夹中，则可以使用直接名称，即 background-image: url('imageName.png') 可以解决
如果图像保存在保存 HTML 文件的子文件夹中，则可以使用短路径，即 htmlFileFolder（包含 html 文件) > folder1 > folder2 > image.png 然后 url 会像这样 folder1/folder2/image.png 而不是 /folder1/folder2/image.png
如果图像保存在 HTML 文件或 HTML 文件子文件夹以外的文件夹中，则必须使用完整路径

CSS 关键帧动画

CSS Keyframe Animations

html

css

frontend

keyframe

css-animations

更新：