学习试发

月婵

欣赏学习试发好作品！

风清

美美的喇叭花，清晰漂亮！祝贺您发全屏大图成功！
点赞问好！

咕咚来了

这个还可以。

微尘

丁香 发表于 2024-10-18 18:51
代码写出来叫咱看看？

你看吧。这我发的帖子的代码。


<style>
  #oBlk {
    margin-left: 50% ; left: -598px;
    margin-top:110px;
    width: 1210px;
    height: 640px;
    box-shadow: 3px 3px 10px #000;
    overflow: hidden;
    position: absolute;
  }

  #oBlk::before,
  #oBlk::after {
    position: absolute;
    content: '';
    left: var(--curX0);
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('https://pic.imgdb.cn/item/6711e41ad29ded1a8c3c63ab.jpg') no-repeat center / cover;
  }

  #oBlk::after {
    left: var(--curX1);
    transform: scaleX(-1);
  }
</style>
<div id="oBlk"></div>
<div style="height:640px;"></div>
<script>
{
  let blkWidth = oBlk.offsetWidth;
  let step = 1.0, tune = 0,
    curX0 = 0,
    curX1 = blkWidth,
    raf;

  let moving = () =>        {
/*   
        //自左向右
    curX0 += step;
    curX1 += step;
    if(curX0 >= blkWidth) curX0 = -blkWidth;
    if(curX1 >= blkWidth) curX1 = -blkWidth;
*/      
        //自右向左
    curX0 -= step;
    curX1 -= step;
    if(curX0 <= -blkWidth) curX0 = blkWidth;
    if(curX1 <= -blkWidth) curX1 = blkWidth;

    tune = curX1 + (curX0 >= 0 ? 1 : -1);
    oBlk.style.setProperty('--curX0', curX0 + 'px');
    oBlk.style.setProperty('--curX1', tune + 'px');
    raf = requestAnimationFrame(moving);
  };
  moving();
}  
</script></div></div><br><br><br><br><br><video autoplay="" controls="" height="1" src="https://link.hhtjim.com/kw/187721696.mp3" width="2">

微尘

武朝歌 发表于 2024-10-18 18:55
晚上好。欣赏，学习了。赞！

晚上好。谢谢你了。我这是第一次学习着发帖的。比起你来，我还差的远哦。

微尘

月婵 发表于 2024-10-18 18:55
欣赏学习试发好作品！

捣鼓了多次的哦。总算成功了。

微尘

风清 发表于 2024-10-18 19:09
美美的喇叭花，清晰漂亮！祝贺您发全屏大图成功！
点赞问好！

谢谢风清的关注欣赏点赞回帖鼓励与支持！捣鼓了多次的，最后要审核了，无可奈何了。成功了。

微尘

咕咚来了 发表于 2024-10-18 19:20
这个还可以。

开始发帖的时候，不动弹的，换了几次代码，要审核了。

筱亭

大哥厉害！教教我

蓝朵1111

很漂亮的蓝色牵牛花。