马黑黑 发表于 2022-1-17 20:55

这个除了队长没多少人能懂

本帖最后由 加林森 于 2022-1-18 11:45 编辑 <br /><br /><style type="text/css">
.mBox {
        position: relative;
        left: -304px;
        top: 100px;
        width: 1200px;
        min-height: 300px;
        box-shadow: 2px 2px 4px 1pxrgba(0,0,0,.2);
        background: transparent;
}
.sBox {
        background: #aaa;
        text-align: center;
}
.sBox h2, p { padding: 10px; }

.marq {
        margin: 10px auto;
        position: relative;
        top: -620px;
        left: -120px;
        width: 50%;
        animation: goNow 10s linear infinite alternate;
}
@keyframes goNow {
        from { transform: translate(0,0); }
        to { transform: translateX(-50%); }
}

.btnDiv {
      position: relative;
      width: 32px;
      height: 32px;
      border: none;
      background: #035575;
      border-radius: 50%;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
      cursor: pointer;
}

.btnDiv:hover {
      opacity: .8;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}

.btnDiv:active {
      opacity: .8;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}

.btn-play {
      position: absolute;
      width: 0px;
      height: 0px;
      border: 10px solid #000;
      border-top-color:transparent;
      border-right-color:transparent;
      border-bottom-color:transparent;
      border-left-color:#eee;
      left: 12px;
      top: 6px;
}

.btn-pause {
      position: absolute;
      display:none;
      width: 2px;
      height: 20px;
      border-right: 4px solid #eee;
      border-bottom:0px;
      border-left: 4px solid #eee;
      left: 11px;
      top: 6px;
}
</style>

<div class="mBox">
        <div class="sBox">
                <img src="https://638183.freep.cn/638183/Pic/xuehua.jpg" alt="" />
        </div>
</div>
<h2 class ="marq">阿尔法 - 中国(维语版)</h2>
<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/09/26/ef22b4ac5961fdf344558aa51a913d6f.mp3"></audio>
<div id="btnDiv" class="btnDiv">
        <div id="btn-play" class="btn-play"></div>
        <div id="btn-pause" class="btn-pause"></div>
</div>

<script language="javascript">

var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');

btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })

function iplay(flag){
      if(flag==1){
                mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
      }else{
                playbtn.style.display= "block";
                pausebtn.style.display = "none";
      }
}
</script>

绿叶清舟 发表于 2022-1-17 20:58

沙发先坐上

加林森 发表于 2022-1-17 20:58

老黑好漂亮的制作，赞！谢谢老黑啊！{:4_191:}

马黑黑 发表于 2022-1-17 20:59

加林森 发表于 2022-1-17 20:58
老黑好漂亮的制作，赞！谢谢老黑啊！

{:4_191:}

马黑黑 发表于 2022-1-17 20:59

绿叶清舟 发表于 2022-1-17 20:58
沙发先坐上

{:4_190:}

绿叶清舟 发表于 2022-1-17 21:02

马黑黑 发表于 2022-1-17 20:59


这么客气

加林森 发表于 2022-1-17 21:06

马黑黑 发表于 2022-1-17 20:59


{:4_191:}

上海朝阳 发表于 2022-1-17 21:16

唷，这漂亮的音画，居然还藏着一个音乐开关呀

千羽 发表于 2022-1-17 21:39

黑黑老师的音画好漂亮{:4_187:}

千羽 发表于 2022-1-17 21:42

歌儿好听，音乐按钮是手动挡{:4_199:}

红影 发表于 2022-1-17 21:53

还真是听不懂，不过黑黑的制作好漂亮{:4_187:}

四海八荒 发表于 2022-1-17 22:36

听懂还是看懂？

马黑黑 发表于 2022-1-17 23:01

四海八荒 发表于 2022-1-17 22:36
听懂还是看懂？

听

加林森 发表于 2022-1-18 10:11

继续来欣赏！{:4_190:}

红影 发表于 2022-1-18 10:45

这个就是用透明按钮做的，还弄了个循环鼓动的文字，这个作为范例倒是可以学着做个呢{:4_173:}

加林森 发表于 2022-1-18 11:12

红影 发表于 2022-1-18 10:45
这个就是用透明按钮做的，还弄了个循环鼓动的文字，这个作为范例倒是可以学着做个呢

对的，我们都跟到学习才好啊。{:4_190:}{:4_204:}

马黑黑 发表于 2022-1-18 11:13

红影 发表于 2022-1-18 10:45
这个就是用透明按钮做的，还弄了个循环鼓动的文字，这个作为范例倒是可以学着做个呢

看出来了

加林森 发表于 2022-1-18 12:13

马黑黑 发表于 2022-1-18 11:13
看出来了

我感觉如果图片改变了颜色，播放器也可以跟到变颜色的吧。{:4_190:}

小辣椒 发表于 2022-1-18 12:18

队长是学习黑黑这个制作的{:4_187:}

加林森 发表于 2022-1-18 12:22

小辣椒 发表于 2022-1-18 12:18
队长是学习黑黑这个制作的

是的是的
页: [1] 2 3 4
查看完整版本: 这个除了队长没多少人能懂