朵拉 发表于 2025-2-23 20:30

关 不 掉

<style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 660px;
      border: none;
      border-top: 6px solid #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #ad8f5b;
}
.ctBox {
      margin: 0;
      padding: 10px;
      background: #fff;
      min-height: 300px;
      border-radius: 10px;
      box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 32px;
      height: 32px;
      outline: none;
      border: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/61e446952ab3f51d917b0f77.png') no-repeat;
      cursor: pointer;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
      opacity: 0.95;
      box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}

.picBtn:active {
      opacity: 0.8;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}

</style>

<div class="mnBox">
      <div class="ctBox">

            <p><img style="padding-top: 30px; alt="" src="https://pic1.imgdb.cn/item/67bb071fd0e0a243d402987d.jpg" /></p>

         
                <h2 style="text-align:center;">「关 不 掉」</h2>
               
                <pre>
                后来的我吧
                不提也罢 不算坏或差
                后来的她吧
                性格温雅 也爱说笑话
                从前的我啊
                不提也罢 免得太尴尬
                从前的你呀
                微笑一下 我就被融化
               
                你我过去似乎被谁按下
                按下了播放键画面开始挣扎
                经过我们每个幸福的时刻
                都要定格一下
                该怎么关掉它

                关掉心脏不再想她
                关掉眼泪不用说话
                愈合的疤会遗忘吧
                痛也难觉察
               
                关掉电话不联络她
                关掉熟悉变陌生吧
                可回忆呢
                不肯停一下啊
               
                我们每个幸福时刻
                画面都要定格一下
                谁能教我怎么忘掉她
                </pre>
               <p><audio id="music" src="https://cccimg.com/view.php/9c19210c9beb88f1e1b76869ea5f3033.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
         
                <p><button id="picBtn" class="picBtn"></button></p><br>
                <p>朵拉制作2025—02—23</p><br><br>
      </div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e446952ab3f51d917b0f77.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e561062ab3f51d9145d37c.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/61e561062ab3f51d9145d37c.png')";
})

</script>

绿叶清舟 发表于 2025-2-23 20:41

谢谢朵拉分享精彩，这声音好听

走过岁月 发表于 2025-2-23 21:02

这样风格的帖子也好看

红影 发表于 2025-2-23 21:24

好听。欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-2-23 22:17

{:4_199:}

小辣椒 发表于 2025-2-23 23:07

朵拉做这个边框播放器，可以按边框颜色自己做播放器按钮，和背景同色系会更加漂亮

小辣椒 发表于 2025-2-23 23:07

欣赏朵拉的精彩制作{:4_187:}

梦江南 发表于 2025-2-24 07:58

欣赏老师的精彩制作。问好！
页: [1]
查看完整版本: 关 不 掉