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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

×

你莫走 (童声版)

TO：马黑黑

                男：妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女：哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男：你莫走

                女：我不走

                男：赌过咒

                女：拉过勾

                男：你莫走

                女：我不走

                男：天做被

                女：地当铺

小辣椒 2022 01 26

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

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

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

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

感谢黑黑的源码分享和指导

@马黑黑

<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>