月半可可 发表于 2026-6-17 23:06

端午快乐

本帖最后由 杨帆 于 2026-6-18 11:03 编辑 <br /><br /><!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>音画贴</title>

<style>

/* ===== 音画容器（竖排） ===== */
.gallery {
    width: 1440px;height:1440px;margin:130px 0;position: relative;left: calc(50% - 81px); transform: translateX(-50%);z-index: 1;
}

/* ===== 单张切片 ===== */
.slice {
    width: 1440px;
    height: 288px;
    background-size: cover;
    background-position: center;
}

/* 切片图片（从上到下） */
.slice:nth-child(1) { background-image: url("https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E6%8C%89%E6%96%B0%E5%B0%BA%E5%AF%B8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87_01.png"); }
.slice:nth-child(2) { background-image: url("https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E6%8C%89%E6%96%B0%E5%B0%BA%E5%AF%B8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87_02.png"); }
.slice:nth-child(3) { background-image: url("https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E6%8C%89%E6%96%B0%E5%B0%BA%E5%AF%B8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87_03.png"); }
.slice:nth-child(4) { background-image: url("https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E6%8C%89%E6%96%B0%E5%B0%BA%E5%AF%B8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87_04.png"); }
.slice:nth-child(5) { background-image: url("https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E6%8C%89%E6%96%B0%E5%B0%BA%E5%AF%B8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87_05.png"); }

/* ===== 隐藏音频 ===== */
audio { display: none;}
.msvg{ cursor:pointer; background:none;border:none;position:absolute;bottom:55px;right:435px;border-radius:50%;z-index:12; }   
</style>
</head>

<body>

<!-- 竖排音画 -->
<div class="gallery">
    <div class="slice"></div>
    <div class="slice"></div>
    <div class="slice"></div>
    <div class="slice"></div>
    <div class="slice"></div>
    <svg class = "msvg" width="100" height="100" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>播放/暂停</title>
        <circlecx="100" cy="100" r="26" fill = "transparent" stroke ="rgb(248, 243, 235)" stroke-width = "0"></circle>
</svg>
</div>

<!-- 背景音乐 -->
<audio id="bgm" src="https://596409.freep.cn/596409/2026.%E7%AB%AF%E5%8D%88/%E9%9D%99%E5%90%AC%E5%B1%B1%E6%B2%B3.mp3" preload="auto" autoplay loop muted playsinline></audio>

<script>
const audio = document.getElementById("bgm");
const msvg = document.querySelector('.msvg');

window.addEventListener('load', () => {
    audio.muted = false;
    audio.play().catch(() => {
      document.body.addEventListener("click", () => audio.play(), { once: true });
    });
});

msvg.onclick = (e) => {
e.stopPropagation();
if (audio.paused) {
    audio.play();
} else {
    audio.pause();
}
}

</script>

</body>
</html>

梦风雨 发表于 2026-6-18 09:36

问好朋友

杨帆 发表于 2026-6-18 11:05

问好月半可可朋友，分享精彩，祝端午安康{:4_190:}

红影 发表于 2026-6-18 11:58

漂亮的制作。欣赏胖阿哥好帖，端午安康{:4_187:}

月半可可 发表于 2026-6-19 09:55

梦风雨 发表于 2026-6-18 09:36
问好朋友

谢谢老师欣赏，祝端午安康

月半可可 发表于 2026-6-19 09:56

红影 发表于 2026-6-18 11:58
漂亮的制作。欣赏胖阿哥好帖，端午安康

谢谢老师欣赏，祝端午安康

月半可可 发表于 2026-6-19 09:56

杨帆 发表于 2026-6-18 11:05
问好月半可可朋友，分享精彩，祝端午安康

谢谢老师欣赏，祝端午安康

梦江南 发表于 2026-6-19 09:59

欣赏老师佳作，端午安康！
页: [1]
查看完整版本: 端午快乐