小辣椒 发表于 2022-1-26 00:11

css编辑单曲播放器以及边框代码套用分享

<style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 660px;
      border: none;
      border-top: 6px solid #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #b3c3c3;
}
.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://pic.imgdb.cn/item/60f989c85132923bf81abe08.jpg" /></p>

         
                <h2 style="text-align:center;">你莫走 (童声版)</h2>
                <h2 style="text-align:center;">TO:马黑黑</h2>
                <pre>
                男:妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女:哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男:你莫走

                女:我不走

                男:赌过咒

                女:拉过勾

                男:你莫走

                女:我不走

                男:天做被

                女:地当铺

                </pre>
               <p><audio id="music" src="https://www.joy127.com/url/84973.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
         
                <p><button id="picBtn" class="picBtn"></button></p><br>
                <p>小辣椒2022 01 26</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>

小辣椒 发表于 2022-1-26 14:35

这个css代码真的很强大,小辣椒特别喜欢的

这个音乐帖制作最大的优点就是不用上传空间,可以自己编辑喜欢的外框大小尺寸和颜色,只要替换自己的图片和音乐,也是可以自己制作播放器按钮替换链接就可以了

小辣椒 发表于 2022-1-26 00:12

感谢黑黑的源码分享和指导{:4_187:}@马黑黑




<style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 660px;
      border: none;
      border-top: 6px solid #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #b3c3c3;
}
.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://pic.imgdb.cn/item/60f989c85132923bf81abe08.jpg" /></p>

         
                <h2 style="text-align:center;">你莫走 (童声版)</h2>
                <h2 style="text-align:center;">TO:马黑黑</h2>
                <pre>
                男:妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女:哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男:你莫走

                女:我不走

                男:赌过咒

                女:拉过勾

                男:你莫走

                女:我不走

                男:天做被

                女:地当铺

                </pre>
               <p><audio id="music" src="https://www.joy127.com/url/84973.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
         
                <p><button id="picBtn" class="picBtn"></button></p><br>
                <p>小辣椒2022 01 26</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>

小辣椒 发表于 2022-1-26 01:05

请黑黑老师检查小辣椒css代码有没有错误{:4_187:}

红影 发表于 2022-1-26 09:50

亲爱的辛苦了,居然做到那么晚。这个好,全代码边框,而且加分不会飞出去了{:4_187:}

红影 发表于 2022-1-26 09:51

这个大家只要换歌曲、图片和文字,就可以套用了来做帖子了{:4_187:}

冬天的雨 发表于 2022-1-26 20:42

冬雨要学习做一次{:4_187:}

加林森 发表于 2022-1-27 17:30

这个真的好使用,谢谢小辣椒。{:4_187:}{:4_190:}

朵嫣 发表于 2022-2-15 19:47

謝謝小辣椒分享~
欣賞美帖又可學東西{:5_106:}

梦风雨 发表于 2022-11-24 13:51

帖制作精美,欣赏。{:4_191:}

梦风雨 发表于 2022-11-24 13:51

这播放器还真好看,欣赏。{:4_204:}

闲言不语 发表于 2022-11-24 13:55

歌词改了,否则还真不适合儿童唱
页: [1]
查看完整版本: css编辑单曲播放器以及边框代码套用分享