css实现图片序列实现播放暂停倒放等类似视频操作效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css实现图片序列实现播放暂停倒放等类似视频操作效果代码，无js代码，仅仅通过css的background引入很多图片序列帧，形成类似视频播放的效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link rel='stylesheet' href='https://olivier3lanc.github.io/folio-dark/css/cinematics.css'>
  
<style>
body {
  background-color: black;
}

.scene {
  position: fixed;
  display: flex;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  background-color: black;
  transform: translateX(-50%) translateY(-50%);
}
.scene::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 111.5%;
  height: 111.5%;
  transition: none;
  animation-timing-function: step-start;
  animation-iteration-count: infinite;
  background-size: 90%;
  background-repeat: no-repeat;
}

@keyframes specialLetter {
  100% {
    transform: rotateY(180deg);
  }
}
#special-letter {
  perspective: 1em;
}
#special-letter > span {
  animation: specialLetter 3s 3s infinite alternate;
}

#cmd-play:checked ~ figure::after {
  animation-play-state: running;
}
#cmd-play:checked ~ nav [for=cmd-play] {
  color: var(--cin-color-primary);
}

#cmd-pause:checked ~ figure::after {
  animation-play-state: paused;
}
#cmd-pause:checked ~ nav [for=cmd-pause] {
  color: var(--cin-color-primary);
}

#cmd-normal:checked ~ figure::after {
  animation-direction: normal;
}
#cmd-normal:checked ~ nav [for=cmd-normal] {
  color: var(--cin-color-primary);
}

#cmd-reverse:checked ~ figure::after {
  animation-direction: reverse;
}
#cmd-reverse:checked ~ nav [for=cmd-reverse] {
  color: var(--cin-color-primary);
}

#cmd-alternate:checked ~ figure::after {
  animation-direction: alternate;
}
#cmd-alternate:checked ~ nav [for=cmd-alternate] {
  color: var(--cin-color-primary);
}

#cmd-alternate-reverse:checked ~ figure::after {
  animation-direction: alternate-reverse;
}
#cmd-alternate-reverse:checked ~ nav [for=cmd-alternate-reverse] {
  color: var(--cin-color-primary);
}

@keyframes the_scene {
  1.1363636364% {
    background-position: 50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  2.2727272727% {
    background-position: -1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  3.4090909091% {
    background-position: -1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  4.5454545455% {
    background-position: -1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  5.6818181818% {
    background-position: -1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  6.8181818182% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  7.9545454545% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  9.0909090909% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  10.2272727273% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  11.3636363636% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  12.5% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  13.6363636364% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  14.7727272727% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  15.9090909091% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%;
  }
  17.0454545455% {
    background-position: -1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,50%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-1000%,-100.........完整代码请登录后点击上方下载按钮下载查看