醉美水芙蓉 发表于 昨天 21:43

霜染枫丹音画《蜀葵之梦》

<style>
    @import url(<a href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap" target="_blank">https://fonts.googleapis.com/css2?family=Long+Cang&display=swap</a>);
    /* 中间层：原有滚动轮播窗口 */
    #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></td></tr></table>
页: [1]
查看完整版本: 霜染枫丹音画《蜀葵之梦》