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

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

小辣椒 发表于 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]

花潮论坛's Archiver

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