加林森 发表于 2022-5-22 13:45

《爱是辣舞DJ》- 群星（根据老黑的教程制作）


<style>
.bgbox {
        left: -302px;
        width: 1200px;
        height: 799px;
        background-color: tan;
        background-image: url('https://pic.imgdb.cn/item/6289cb4c0947543129df6ba3.jpg'),
                url('https://pic.imgdb.cn/item/6289cc6b0947543129e03a38.png');
        background-repeat: no-repeat;
        background-position: center, right bottom;
        background-blend-mode: soft-light, screen;
        box-shadow: 2px 2px 6px gray;
        position: relative;
}
.tube {
        display: flex;
        justify-content: center;
        width: 10px;
        height: 100px;
        background-color: #eee;
        background: linear-gradient(#aaa 1px, #eee 1px);
        background-size: 8px 10px;
        box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transform: translate(10px, 669px);
        position: relative;
}
.ball {
        position: absolute;
        width: 4px;
        height: 100px;
        background: rgba(255,0,0,.45);
        top: 100px;
}
</style>

<div class="bgbox">
        <div class="tube">
                <div class="ball"></div>
        </div>
        <audio id="aud" src="https://www.joy127.com/url/18831.mp3" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
let aud = document.querySelector('#aud');
let tube = document.querySelector('.tube');
let ball = document.querySelector('.ball');
let task, current;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        ball.style.transform ='translateY(-' + prog + 'px)';
}
</script>

加林森 发表于 2022-5-22 13:45

@马黑黑

红影 发表于 2022-5-22 14:01

队长也做个了体温计呢，学得真快{:4_187:}

大猫咪 发表于 2022-5-22 14:02

队长这么快就制作出来了，厉害   真漂亮！好听好看   赞！

{:4_204:}{:4_199:}

加林森 发表于 2022-5-22 14:27

红影 发表于 2022-5-22 14:01
队长也做个了体温计呢，学得真快

就是套老黑的代码就制作出来了。谢谢红影！{:4_204:}

加林森 发表于 2022-5-22 14:28

大猫咪 发表于 2022-5-22 14:02
队长这么快就制作出来了，厉害   真漂亮！好听好看   赞！

是的，套来黑的代码就制作出来了。

醉美水芙蓉 发表于 2022-5-22 15:32

马黑黑 发表于 2022-5-22 16:18

热辣

加林森 发表于 2022-5-22 16:49

醉美水芙蓉 发表于 2022-5-22 15:32
队长新作品真漂亮！

谢谢水芙蓉！{:4_204:}

加林森 发表于 2022-5-22 16:49

马黑黑 发表于 2022-5-22 16:18
热辣

老黑这个制作成功了吧。

小辣椒 发表于 2022-5-22 16:51

队长第一名{:4_187:}

小辣椒 发表于 2022-5-22 16:52

队长的速度杠杠的{:4_178:}

加林森 发表于 2022-5-22 16:52

小辣椒 发表于 2022-5-22 16:51
队长第一名

小辣椒下午好！周末快乐！{:4_204:}

加林森 发表于 2022-5-22 16:56

小辣椒 发表于 2022-5-22 16:52
队长的速度杠杠的

中午制作的。{:4_189:}

马黑黑 发表于 2022-5-22 17:01

加林森 发表于 2022-5-22 16:49
老黑这个制作成功了吧。

非常成功

小辣椒 发表于 2022-5-22 17:01

加林森 发表于 2022-5-22 16:52
小辣椒下午好！周末快乐！

谢谢队长，刚才去午睡了，现在上来看看老头在不在的

小辣椒 发表于 2022-5-22 17:02

加林森 发表于 2022-5-22 16:56
中午制作的。

队长佩服你哦。。。。但别太辛苦，中午睡一下

加林森 发表于 2022-5-22 17:02

小辣椒 发表于 2022-5-22 17:01
谢谢队长，刚才去午睡了，现在上来看看老头在不在的

我也刚锻炼回家呢。

加林森 发表于 2022-5-22 17:03

马黑黑 发表于 2022-5-22 17:01
非常成功

谢谢你了！{:4_190:}

加林森 发表于 2022-5-22 17:04

小辣椒 发表于 2022-5-22 17:02
队长佩服你哦。。。。但别太辛苦，中午睡一下

嗯嗯，知道了。{:4_190:}
页: [1] 2
查看完整版本: 《爱是辣舞DJ》- 群星（根据老黑的教程制作）