古来稀 发表于 22.10.11 20:51:31

【音画】图片自动转换《万里长城》

<DIV style="LEFT: -232px; WIDTH: 1000px; POSITION: relative; TOP: -100px">
<style type="text/css">
      #outblk      {margin: auto;
      width: 1000px;
      height: 600px;
      margin-top: 20px;
      margin-left: 30px;
      box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      z-index: 1;
      }
#photo {
      width: 1000px;
      height: 600px;
      position: absolute;
      border: 0px solid #000000;
      top: 0px;
      left: 0px;
      background:#800000 linear-gradient(45deg, #0411FA 2%,#8B43C 7%);}
#photo img {
      width: 1000px;
      height: 600px;
      position: absolute;
      border: 0px solid #000000;
      top: 0px;
      left: 0px;
      filter: contrast(120%)brightness(110%);
      opacity: 0;
      animation-name: round;
      animation-duration: 48s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}


@keyframes round{0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;background-position: 0% 0%;
}
12% {
opacity: 1;background-position: 0% 0%;
}
18% {
opacity: 0;background-position: 0% 0%;
-webkit-transform:translate(0%,0%)scale(1);}
}
#photo img:nth-child(8) {
      animation-delay: 42s;
}
#photo img:nth-child(7) {
      animation-delay: 36s;
}
#photo img:nth-child(6) {
      animation-delay: 30s;
}
#photo img:nth-child(5) {
      animation-delay: 24s;
}
#photo img:nth-child(4) {
      animation-delay: 18s;
}
#photo img:nth-child(3) {
      animation-delay: 12s;
}
#photo img:nth-child(2) {
      animation-delay: 6s;
}
#photo img:nth-child(1) {
      animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(2) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(3) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(4) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(5) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(6) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(7) {
      animation-play-state: paused;
}
.stop #photo img:nth-child(8) {
      animation-play-state: paused;
}
      }
</style>
<div id="outblk"><div id="testImg">
<divid="photo"><img src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b24b.jpg" /> <img src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b256.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b261.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b26f.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2b.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2c1.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2ce.jpg" /><img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2f0.jpg" /> </div></div>
</div>
</script>
</td></tr><br><br><br><br><br><br><br><br></tr><br><br><br><br><br><br><br><br></div>
<video src="https://link.hhtjim.com/kw/37345457.mp3" width="4" height="2" controls="" autoplay=""><ideo></ideo></video>

一鸣 发表于 22.10.11 21:58:15

漂亮，欣赏佳作！:victory:

古来稀 发表于 22.10.11 22:08:23

一鸣 发表于 22.10.11 21:58
漂亮，欣赏佳作！

谢谢一鸣贤弟支持！

猫猫虎 发表于 22.10.12 09:01:51

谢谢分享~:)

古来稀 发表于 22.10.12 09:03:20

猫猫虎 发表于 22.10.12 0:01
谢谢分享~

非常感谢老朋友关注支持！:handshake
页: [1]
查看完整版本: 【音画】图片自动转换《万里长城》