论坛 › 欢乐水吧 › Rayhon - Tomchi

马黑黑 发表于 2022-5-21 11:56

Rayhon - Tomchi

<style>
.mama {
        left: -20px;
        width: 800px;
        height: 600px;
        background-color: teal;
        background-image: linear-gradient(gray 5%, transparent, lightseagreen),
                radial-gradient(circle at 20% 20%, yellow, gold);
        position: relative;
}
.mama img {
        position: absolute;
        width: 200px;
        border-radius: 50%;
        transform: translate(610px, 100px);
}
.circle {
        top: 10px; left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        border: 10px solid #5d513c;
        border-radius: 50%;
        background: linear-gradient(45deg, #ccc, #fff);
        cursor: pointer;
        position: relative;
}
.circle::before, .circle::after { position: absolute; content: ''; }
.circle::before { font: normal 14px sans-serif; content: attr(data-per); }
.circle::after {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #eee;
        right: -10px;
}
.ball {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #eee;
        background-image: radial-gradient(#fff, transparent);
}
@keyframes rot {
        from {transform: rotate(-90deg) translate(105px); }
        to { transform: rotate(270deg) translate(105px); }
}
</style>

<div class="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1332775473.mp3" autoplay="autoplay" loop="loop"></audio>
        <div class="circle" data-per="0%">
                <div class="ball"></div>
                <img src="/data/attachment/forum/202205/21/115239abqv8h8mab7razrw.jpg" alt="" />
        </div>
</div>

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

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

circle.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 = `rotate(${360*prog/100}deg) translate(45px)`;
        circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

马黑黑 发表于 2022-5-21 11:58

主要是想测试新播放器控制按钮：
<style>
.mama {
        width: 800px;
        height: 600px;
        background-color: teal;
        background-image: linear-gradient(gray 5%, transparent, lightseagreen),
                radial-gradient(circle at 20% 20%, yellow, gold);
}
.mama img {
        position: absolute;
        width: 200px;
        border-radius: 50%;
        transform: translate(610px, 100px);
}
.circle {
        top: 10px; left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        border: 10px solid #5d513c;
        border-radius: 50%;
        background: linear-gradient(45deg, #ccc, #fff);
        cursor: pointer;
        position: relative;
}
.circle::before, .circle::after { position: absolute; content: ''; }
.circle::before { font: normal 14px sans-serif; content: attr(data-per); }
.circle::after {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #eee;
        right: -10px;
}
.ball {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #eee;
        background-image: radial-gradient(#fff, transparent);
}
@keyframes rot {
        from {transform: rotate(-90deg) translate(105px); }
        to { transform: rotate(270deg) translate(105px); }
}
</style>

<div class="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1332775473.mp3" autoplay="autoplay" loop="loop"></audio>
        <div class="circle" data-per="0%">
                <div class="ball"></div>
                <img src="/data/attachment/forum/202205/21/115239abqv8h8mab7razrw.jpg" alt="" />
        </div>
</div>

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

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

circle.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 = `rotate(${360*prog/100}deg) translate(45px)`;
        circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

小辣椒 发表于 2022-5-21 12:06

黒黑又出新产品了，速度啊真快

加林森 发表于 2022-5-21 12:06

印度歌曲？挺好听的。这个制作很漂亮的。{:4_199:}

加林森 发表于 2022-5-21 12:10

这个滚珠重合后歌曲就结束了。老黑真是创意无限啊。{:4_178:}

大猫咪 发表于 2022-5-21 12:10

这代码好漂亮，老黑真棒！{:4_204:}   

红影 发表于 2022-5-21 13:06

弄两个小球也很不错，一个出发后，另一个在等待，最后出发的会回归，皆大欢喜{:4_187:}

红影 发表于 2022-5-21 13:09

黑黑真是创意无限，大宝库{:4_199:}

马黑黑 发表于 2022-5-21 13:34

加林森 发表于 2022-5-21 12:06
印度歌曲？挺好听的。这个制作很漂亮的。

法国的

马黑黑 发表于 2022-5-21 13:34

小辣椒 发表于 2022-5-21 12:06
黒黑又出新产品了，速度啊真快

这个是轨迹按钮

马黑黑 发表于 2022-5-21 13:35

加林森 发表于 2022-5-21 12:10
这个滚珠重合后歌曲就结束了。老黑真是创意无限啊。

小创意

马黑黑 发表于 2022-5-21 13:35

大猫咪 发表于 2022-5-21 12:10
这代码好漂亮，老黑真棒！

代码都是漂酿的

马黑黑 发表于 2022-5-21 13:36

红影 发表于 2022-5-21 13:06
弄两个小球也很不错，一个出发后，另一个在等待，最后出发的会回归，皆大欢喜

创意不咋的是不可能的

马黑黑 发表于 2022-5-21 13:36

红影 发表于 2022-5-21 13:09
黑黑真是创意无限，大宝库

小小创意

加林森 发表于 2022-5-21 13:44

马黑黑 发表于 2022-5-21 13:35
小创意

很漂亮的。

马黑黑 发表于 2022-5-21 13:45

加林森 发表于 2022-5-21 13:44
很漂亮的。

还可以加以修饰

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

马黑黑 发表于 2022-5-21 13:34
法国的

哦。

加林森 发表于 2022-5-21 13:46

马黑黑 发表于 2022-5-21 13:45
还可以加以修饰

嗯嗯，跟你继续学习。

马黑黑 发表于 2022-5-21 13:49

加林森 发表于 2022-5-21 13:46
嗯嗯，跟你继续学习。

基本功能可用，修饰看个人需要

马黑黑 发表于 2022-5-21 13:50

加林森 发表于 2022-5-21 13:45
哦。

法语歌还可以听听，刘欢也经常唱的

查看完整版本: Rayhon - Tomchi