纯css编辑单曲播放器分享

小辣椒 · 发表于 2022-2-9 14:16

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

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

x

550 height=

电视剧《三生三世十里桃花》主题曲

张杰-三生三世

                

                          感谢黑黑老师的css源码分享
                          小辣椒学习做一次小圆点按钮                       
                          这个边框 播放器制作纯css代码编辑
                          喜欢的朋友可以自己修改边框颜色
                          直接复制代码替换自己的音乐
                          替换图片链接
                          喜欢自己的播放器按钮可以替换链接
                          这个套用最大的优点不用上传播放器
                          大家可以套用代码开心的玩


                          这里提一下：

                          滚动字自己按文字长短设置定位代码

电视剧《三生三世十里桃花》主题曲

小辣椒 2022 02 09

小辣椒 · 发表于 2022-2-9 14:26

<style type="text/css">
.mnBox {
position: relative;
margin: 0 auto;
padding: 35px;
width: 660px;
border: none;
border-top: 6px solid #000; /* 顶部边框样式*/
border-radius: 10px;
background: #b3c3c3;
}
.ctBox {
margin: 0;
padding: 30px;
background: #fff;
min-height: 300px;
border-radius: 10px;
}
.ctBox p,img, h2,button { text-align:center; }
.picBtn {
width: 46px;
height: 47px;
outline: none;
border: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/62035ac42ab3f51d91f4aed2.png') no-repeat;
cursor: pointer;
}
.picBtn:hover {
opacity: 0.95;
}
.picBtn:active {
opacity: 0.8;
}
</style>
<div class="mnBox">
<div class="ctBox">
<p><img alt="550 height="366"="" src="http://image.hnol.net/c/2022-01/16/16/202201161607275171-5087368.gif" /></p>
<h2 style="padding-bottom: 10px;">电视剧《三生三世十里桃花》主题曲</h2>
<h2 style="text-align:center;">张杰-三生三世</h2>
<pre>
感谢黑黑老师的css源码分享
小辣椒学习做一次小圆点按钮
这个边框播放器制作纯css代码编辑
喜欢的朋友可以自己修改边框颜色
直接复制代码替换自己的音乐
替换图片链接
喜欢自己的播放器按钮可以替换链接
这个套用最大的优点不用上传播放器
大家可以套用代码开心的玩
这里提一下：
滚动字自己按文字长短设置定位代码
</pre>
<div style="position:absolute; width:120px; left:300px; top: 950px; text-align:center;">
<p ><font color="#000000" size="2" >
<marquee scrollamount="2" direction="left" >电视剧《三生三世十里桃花》主题曲</marquee>
<div style="position:absolute; width:150px; left:-10px; top: 40px; text-align:center;">
<p><audio id="music" src="https://oss.shandianpan.com/5f9e2503d1c77fce8ea39e4aff8aa576.mp3" loop="loop" autoplay="autoplay" ></audio> </p>
<p><button id="picBtn" class="picBtn"></button></p><br>
<p>小辣椒 2022 02 09</p>
</div>
</div>
</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/62035ac42ab3f51d91f4aed2.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/62035b2c2ab3f51d91f51644.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/62035b2c2ab3f51d91f51644.png')";
})
</script>