万顷湖 发表于 2026-7-27 11:45

大势至菩萨-平安吉祥

本帖最后由 万顷湖 于 2026-7-27 12:00 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_483245">
<br /><br /><div style="position: absolute; left:60px;width:100%;margin-top:120px;">
<style>
      #papa { margin: 30px 0 30px calc(); width: 1200px; height: 720px; background: url('https://free.picui.cn/free/2026/07/27/6a66d77498461.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
      #stage { position: absolute; width: 460px; height: 600px; overflow: hidden; cursor: pointer; }
      #stage img { width: 100%; height: 100%; float: left; mask: radial-gra**nt(closest-side, red, red, transparent); }
      #stage img:hover { mask: unset; }
      #btnplay { --state: running; position: absolute; bottom: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
      #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
      #btnplay:hover::before { border-style: dotted; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <div id="stage">
                <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658bb9537b9.jpg" />
                <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658be1b9b56.jpg" />
                <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658c01e4a60.jpg" />
               <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658c1c2e63f.jpg" />
               <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658c386c004.jpg" />
               <img alt="" src="https://free.picui.cn/free/2026/07/26/6a658c5586477.jpg" />
      </div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://upfile.mp3.wf/view.php/48754168355ada5f7369f0a05d382496.mp3" autoplay loop></audio>
</div>

<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
      idx = Math.floor(Math.random() * images.length);
      if(idx === lastIdx) idx = (idx+1) % images.length;
      lastIdx = idx;
      btnplay.innerText = idx + 1;
      stage.scroll({top: idx * stage.clientHeight, behavior: 'smooth'});
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.scrollIntoView(true);
</script>

</div>
<div style="height:960px;"></div>
</td></tr></table>





梦江南 发表于 2026-7-27 12:00

南无阿弥陀佛！{:5_161:}

梦油 发表于 2026-7-27 16:48

祝万顷湖朋友平安吉祥！

万顷湖 发表于 2026-7-27 17:37

梦油 发表于 2026-7-27 16:48
祝万顷湖朋友平安吉祥！

管理员好。谢谢大驾光临，祝您夏安，万事如意！

红影 发表于 2026-7-27 19:35

清净 圣洁 美妙，感谢佛祖护佑{:5_161:}
欣赏万顷湖好帖{:4_199:}

梦油 发表于 2026-7-27 19:50

万顷湖 发表于 2026-7-27 17:37
管理员好。谢谢大驾光临，祝您夏安，万事如意！

谢谢万顷湖朋友的美好祝福。我们都是朋友，别客气。

万顷湖 发表于 2026-7-27 20:39

红影 发表于 2026-7-27 19:35
清净 圣洁 美妙，感谢佛祖护佑
欣赏万顷湖好帖

管理员都是无私奉献，最有菩萨心肠，最受菩萨护佑。谢谢鼓励。

红影 发表于 2026-7-27 21:55

万顷湖 发表于 2026-7-27 20:39
管理员都是无私奉献，最有菩萨心肠，最受菩萨护佑。谢谢鼓励。

谢谢万顷湖吉言，非常感谢您{:4_187:}
页: [1]
查看完整版本: 大势至菩萨-平安吉祥