霜染枫丹 发表于 2026-8-8 23:37

蜀葵之梦 感谢夕阳黄昏代码修改

本帖最后由 霜染枫丹 于 2026-8-9 11:47 编辑 <br /><br /><style>
    @import url(https://fonts.googleapis.com/css2?family=Long+Cang&display=swap);
    /* 中间层：原有滚动轮播窗口 */
    #oBlk {
      width: 1200px;
      height: 700px;
      background: url("https://imgimg.qqdsw8.cn/view.php/cd611330c971920e884c0eaf361ed012.png") no-repeat center/cover;
      padding: 32px 32px;
      place-items: center;
      position: relative;
      box-shadow: 3px 3px 4px darkgray;
      overflow: hidden;
      border-radius: 24px;
      display: grid;
      place-items: center;
      grid-template-rows: 90% 1%;
      grid-template-columns: 100%;
      margin: 30px auto 30px calc(50% - 681px);
    }

    #pa {
      width: 90%;
      height: 90%;
      border: 4px dotted gray;
      overflow: hidden;
      position: relative;
    }

    #son {
      position: absolute;
      height:100%;
      white-space: nowrap;
      display: inline-block; /*关键修复，横向排列图片*/
      animation: scroll 55s linear infinite;
    }

    #son:hover {
      animation-play-state: paused;
    }

    #son img {
      height:100%;
      margin:0;
      display: inline-block; /*图片同行不换行*/
    }

    /* 顶层文字说明层，z-index最高浮在最上面 */
    #text-layer {
      z-index: 99;
      font-size: 0.95em;
      color: brown;
      background-color: transparent;
      margin-top: 38px;
      border-radius: 6px;
      max-width: 1000px;
      font-family: "SimHei", "Heiti SC", sans-serif;
      padding: 6px;
      cursor: pointer;
      line-height: 1.4;
    }

    @keyframes scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); } /*移动一半（因为图片复制两份）全部图片完整走完*/
    }
</style>

<div id='oBlk'>
    <div id="pa">
      <div id="son">
            <!--第一组原图10张-->
             <img src="https://pic.imgdd.cc/i/0343bwp9hHWwdBxc1pX7o4.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwp6Zvb1ahXVPAKYyC.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwp0LPL7bHnM7AqyjN.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwos9d4Hvk5oq6FAh4.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwpETSMEHmWHq8GWkW.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwpfTkbfuLXF9qENLe.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqugSgzoirh5627rW.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqMrDkMmVl4SGM5dP.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqv4jWnAfn0Q1DQZE.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwrElHvpcieyCwkgMy.jpg" loading="lazy" alt="" />
            <!--复制一遍全部图片，实现无缝循环，不要删除这一段！-->
             <img src="https://pic.imgdd.cc/i/0343bwp9hHWwdBxc1pX7o4.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwp6Zvb1ahXVPAKYyC.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwp0LPL7bHnM7AqyjN.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwos9d4Hvk5oq6FAh4.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwpETSMEHmWHq8GWkW.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwpfTkbfuLXF9qENLe.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqugSgzoirh5627rW.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqMrDkMmVl4SGM5dP.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwqv4jWnAfn0Q1DQZE.jpg" loading="lazy" alt="" />
            <img src="https://pic.imgdd.cc/i/0343bwrElHvpcieyCwkgMy.jpg" loading="lazy" alt="" />
      </div>
    </div>
    <div id="text-layer">
      <div style="text-align: center; font-size: 1.2em; margin-bottom: 2px;">蜀葵之梦</div>
      <div style="text-align: left;">
            红萼临阶&emsp; 远隔尘喧&emsp; 芳含暖意&emsp; 默沁心渊<br>
            临风绰约&emsp; 静守清念&emsp; 韶光漫染&emsp; 织就流年
      </div>
    </div>
</div>
</marquee>
<video loop autoplay src="https://imgimg.qqdsw8.cn/view.php/afec70d28f29bb844f93d6bc3b8a5ee9.mp3
"></video></div>

霜染枫丹 发表于 2026-8-8 23:42

https://s3.bmp.ovh/2026/08/09/LiLW8aTX.png

霜染枫丹 发表于 2026-8-8 23:48



蜀葵之梦
红萼临阶   远隔尘喧    芳含暖意   默沁心渊
临风绰约   静守清念    韶光漫染   织就流年

红影 发表于 2026-8-9 07:19

这些蜀葵花好美，以前小区也有那么一两颗，这几年好像不见了。
欣赏枫丹好帖，@夕阳黄昏 收礼开心{:4_187:}

夕阳黄昏 发表于 2026-8-9 07:33

所用到的代码并非出自我的帖子，本源是马老师的帖子《纯CSS实现多图无限平滑循环滚动（通用方法）》

特此说明

梦江南 发表于 2026-8-9 07:52

欣赏枫丹好帖，@夕阳黄昏 收礼开心

霜染枫丹 发表于 2026-8-9 09:17

红影 发表于 2026-8-9 07:19
这些蜀葵花好美，以前小区也有那么一两颗，这几年好像不见了。
欣赏枫丹好帖，@夕阳黄昏 收礼开心{:4_187: ...

感谢红影的支持，上午好！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-9 09:23

夕阳黄昏 发表于 2026-8-9 07:33
所用到的代码并非出自我的帖子，本源是马老师的帖子《纯CSS实现多图无限平滑循环滚动（通用方法）》

特 ...

夕阳黄昏上午好！我的播放器等代码贴全都是马老师贴出来的代码的衍生，没有另外，我自己做得只有图文代码，简单的制作。

我来这里之前不会做播放器等东东。我留存了您编辑的鼠标作为语音播放的那一版，对于我制作原创游记的片头太合适了，非常感谢！
祝您制作愉快！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-9 09:23

梦江南 发表于 2026-8-9 07:52
欣赏枫丹好帖，@夕阳黄昏 收礼开心

感谢梦江南的支持，上午好！{:4_204:}{:4_190:}

红影 发表于 2026-8-9 10:10

霜染枫丹 发表于 2026-8-9 09:17
感谢红影的支持，上午好！

问好枫丹，周日快乐{:4_187:}

雨季工作室 发表于 2026-8-10 08:55

图图绚丽，歌曲寄怀，欣赏了，问好枫丹老师！

霜染枫丹 发表于 2026-8-10 20:13

雨季工作室 发表于 2026-8-10 08:55
图图绚丽，歌曲寄怀，欣赏了，问好枫丹老师！

欢迎雨季工作室，感谢您的支持鼓励，晚上好~~{:4_204:}{:4_190:}

魏淑芬 发表于 2026-8-11 13:25

欣赏蜀葵好拍，制作精良。
这个帖有语音朗读吗？我听不到。

霜染枫丹 发表于 2026-8-11 22:34

魏淑芬 发表于 2026-8-11 13:25
欣赏蜀葵好拍，制作精良。
这个帖有语音朗读吗？我听不到。

没有语音朗读，写的有点不顺拗口，读出来不好听，我就不用了。{:4_190:}{:4_190:}

玫瑰 发表于 2026-9-8 08:42

美乐欣赏，美图欣赏，赏心悦目。{:4_204:}
页: [1]
查看完整版本: 蜀葵之梦 感谢夕阳黄昏代码修改