亚伦影音工作室 发表于 2026-3-31 19:19

玩倒影[左右]

本帖最后由 亚伦影音工作室 于 2026-4-1 02:47 编辑 <br /><br /><style>
#papa {margin:30px -220px;width: 1286px;height: 720px;background:#882200 url(https://img4.oldkids.cn/upload/2023/03/16/photo_0_20230316133333760.jpg) no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","SimHei", "Arial", "sans-serif";--state:running;}
#pa {margin:150px 74px;width: 600px;height: 420px;position: relative;z-index: 1;transform: perspective(600px) rotateY(10deg)rotatex(0deg);overflow:hidden;}

#photos img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photos {position: absolute;z-index:1; width: calc(800% * 9);
            opacity: 1;animation:animate20s linear infinite;}

#paa{margin:-570px 620px;width: 600px;height: 420px;position:relative;z-index: 1;transform: perspective(600px) rotateY(170deg)rotatex(0deg);overflow:hidden;}

#photoss img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photoss{position: absolute;z-index:1; width: calc(800% * 9);
               opacity: 1;
                animation:animate20s linear infinite;}

   
    @keyframes animate {
         0%,20% {      right:0%;}
      25%,30% {       right: -100%; }
      35%,40% {      right: -200%;}
      45%,50% {       right:-300%; }
      55%,60% {      right:-400%; }
      65%,70% {      right:-500%; }
      75%,80% {       right:-600%; }
      85%,90% {      right:-700%;}
       95%,100% {      right: -800%;}
   }

</style>
<div id="papa">
<div id="pa" >
<divid="photos" >
<img src="https://img3.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/7c5e11e8850af24b77faa4280baa5f3b.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/b16aafc95770fb2073e15bfa453f1113.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/951c3b0090c90c7a24455a17178857d5.jpg" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f42c220269531bedf6de3404454f8899.jpg" />
</div>
</div>
<divid="paa">
<divid="photoss">
<img src="https://img3.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/7c5e11e8850af24b77faa4280baa5f3b.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/b16aafc95770fb2073e15bfa453f1113.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/951c3b0090c90c7a24455a17178857d5.jpg" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f42c220269531bedf6de3404454f8899.jpg" />
</div>
</div>

</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/b1/fe/16/cfc2094bff452199a02c5cbb71fada38/audio.mp3" loop autoplay ></audio>

       
<script>
papa.onclick = () => aud.paused ? (aud.play()) : (aud.pause());
let mState = () => aud.paused ? (photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused') : (photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2026-3-31 21:16

左右的这种应该叫做镜射吧，不叫倒影了{:4_173:}
制作很漂亮，欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-3-31 22:14

这“倒影”玩的很出彩，谢谢亚伦老师精彩分享{:4_191:}
页: [1]
查看完整版本: 玩倒影[左右]