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

纯css编辑单曲播放器分享

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

               <marqueescrollamount="2" direction="left" >电视剧《三生三世十里桃花》主题曲</marquee>


   <div style="position:absolute; width:150px; left:-10px; top: 40px; text-align:center;">

               <p><audio id="music" src="https://wj.zp68.com/lxx/yunhua/2022/02/08/ssssslth.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>

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

               <marqueescrollamount="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>


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

这个直接套用修改自己的音乐链接和图片 换自己的文字就可以了，也是可以修改边框颜色，播放器定位在线测试就可以了。

加林森 发表于 2022-2-9 16:44

小辣椒 发表于 2022-2-9 14:28
这个直接套用修改自己的音乐链接和图片 换自己的文字就可以了，也是可以修改边框颜色，播放器定位在线测试 ...

谢谢小辣椒的分享！{:4_204:}

红影 发表于 2022-2-9 20:40

亲爱的厉害，这个很完美了，而且不用上传也不会评分飞出去了{:4_187:}

红影 发表于 2022-2-9 20:40

加林森 发表于 2022-2-9 16:44
谢谢小辣椒的分享！

队长以后用这个吧，前面那个别用了，那个加分会飞的{:4_173:}

加林森 发表于 2022-2-9 20:43

红影 发表于 2022-2-9 20:40
队长以后用这个吧，前面那个别用了，那个加分会飞的

好的好的。{:4_189:}

红影 发表于 2022-2-10 16:46

加林森 发表于 2022-2-9 20:43
好的好的。

看到队长用这个代码做的新帖了，真棒{:4_204:}

加林森 发表于 2022-2-10 18:01

红影 发表于 2022-2-10 16:46
看到队长用这个代码做的新帖了，真棒

是的啊，学以致用嘛。{:4_187:}

红影 发表于 2022-2-10 19:21

加林森 发表于 2022-2-10 18:01
是的啊，学以致用嘛。

很不错的，队长的学习很努力{:4_187:}

加林森 发表于 2022-2-10 20:23

红影 发表于 2022-2-10 19:21
很不错的，队长的学习很努力

应该的啊。{:4_187:}

红影 发表于 2022-2-10 20:55

加林森 发表于 2022-2-10 20:23
应该的啊。

有这个模板，做帖子要方便很多了。

加林森 发表于 2022-2-10 20:56

红影 发表于 2022-2-10 20:55
有这个模板，做帖子要方便很多了。

就是。小辣椒制作的教程真好用。

红影 发表于 2022-2-10 21:04

加林森 发表于 2022-2-10 20:56
就是。小辣椒制作的教程真好用。

希望更多的人来作了玩。

加林森 发表于 2022-2-10 21:08

红影 发表于 2022-2-10 21:04
希望更多的人来作了玩。

就是就是，大家都玩这些，我们论坛回越来越热闹的。
页: [1]
查看完整版本: 纯css编辑单曲播放器分享