论坛 › 欢乐水吧 › 月亮走我不走

马黑黑 发表于 2022-6-2 17:45

月亮走我不走

<style>
.outer {
        left: -20px;
        width: 800px;
        height: 560px;
        background: #ccc linear-gradient(black,transparent,teal);
        box-shadow: 3px 3px 4px #333;
        display: flex;
        position: relative;
}
.outer meter {
        position: absolute;
        width: 100px;
        bottom: 60px;
        left: -20px;
        transform: rotate(-90deg);
        cursor: pointer;
}
.moon {
        margin: auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        box-shadow: 20px 20px 0 0 gold;
        cursor: pointer;
}
.star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: #eee;
        display: block;
        animation: flash 1s linear infinite;
}
@keyframes flash {
        from { opacity: 1; }
        to { opacity: 0; }
}
</style>

<div class="outer">
        <div class="moon"></div>
        <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=212412.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let outer = document.querySelector('.outer'),
        moon = document.querySelector('.moon'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min,max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length: 200}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'star';
        ele.style.left = num(2,798) + 'px';
        ele.style.top = num(2,200) + 'px';
        ele.style.animationDelay = Math.random() * 1.5 + 's';
        outer.appendChild(ele);
})

moon.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate',()=> {
        let prog = 100 * aud.currentTime / aud.duration;
        let deg = prog * 180 / 100 + 90; // 转半圈：从左中开始
        moon.style.transform = 'rotate(' + deg + 'deg) ' + 'translateY(200px) rotate(-' + deg + 'deg)';
        meter.value = prog;
});

</script>

马黑黑 发表于 2022-6-2 17:46

<style>
.outer {
        left: -20px;
        width: 800px;
        height: 560px;
        background: #ccc linear-gradient(black,transparent,teal);
        box-shadow: 3px 3px 4px #333;
        display: flex;
        position: relative;
}
.outer meter {
        position: absolute;
        width: 100px;
        bottom: 60px;
        left: -20px;
        transform: rotate(-90deg);
        cursor: pointer;
}
.moon {
        margin: auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        box-shadow: 20px 20px 0 0 gold;
        cursor: pointer;
}
.star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: #eee;
        display: block;
        animation: flash 1s linear infinite;
}
@keyframes flash {
        from { opacity: 1; }
        to { opacity: 0; }
}
</style>

<div class="outer">
        <div class="moon"></div>
        <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=212412.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let outer = document.querySelector('.outer'),
        moon = document.querySelector('.moon'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min,max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length: 200}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'star';
        ele.style.left = num(2,798) + 'px';
        ele.style.top = num(2,200) + 'px';
        ele.style.animationDelay = Math.random() * 1.5 + 's';
        outer.appendChild(ele);
})

moon.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate',()=> {
        let prog = 100 * aud.currentTime / aud.duration;
        let deg = prog * 180 / 100 + 90; // 转半圈：从左中开始
        moon.style.transform = 'rotate(' + deg + 'deg) ' + 'translateY(200px) rotate(-' + deg + 'deg)';
        meter.value = prog;
});

</script>

加林森 发表于 2022-6-2 18:09

哇噻，老黑又整出新的播放器。厉害厉害。{:4_199:}

加林森 发表于 2022-6-2 18:11

月亮还真在走啊。佩服佩服。{:4_178:}

加林森 发表于 2022-6-2 18:14

满眼的小星星还在不停地闪烁，真美丽。{:4_208:}

小辣椒 发表于 2022-6-2 18:26

黑黑又一个啊{:4_199:}

马黑黑 发表于 2022-6-2 18:30

小辣椒 发表于 2022-6-2 18:26
黑黑又一个啊

这个不用图片

马黑黑 发表于 2022-6-2 18:31

加林森 发表于 2022-6-2 18:09
哇噻，老黑又整出新的播放器。厉害厉害。

这是分离式播放器

马黑黑 发表于 2022-6-2 18:31

加林森 发表于 2022-6-2 18:14
满眼的小星星还在不停地闪烁，真美丽。

这些小星星能异步闪烁

马黑黑 发表于 2022-6-2 18:32

加林森 发表于 2022-6-2 18:11
月亮还真在走啊。佩服佩服。

就是我不走{:5_106:}

加林森 发表于 2022-6-2 19:11

马黑黑 发表于 2022-6-2 18:32
就是我不走

黑牛~~~~~~~~~~~~~~{:4_170:}

加林森 发表于 2022-6-2 19:12

马黑黑 发表于 2022-6-2 18:31
这些小星星能异步闪烁

真漂亮

加林森 发表于 2022-6-2 19:12

马黑黑 发表于 2022-6-2 18:31
这是分离式播放器

很漂亮的制作！{:4_199:}

东篱闲人 发表于 2022-6-2 19:33

漂亮！{:5_116:}

醉美水芙蓉 发表于 2022-6-2 19:49

马黑黑 发表于 2022-6-2 20:01

醉美水芙蓉 发表于 2022-6-2 19:49
这个播放器真漂亮！

分离式的，估计你没见过此类播放器

马黑黑 发表于 2022-6-2 20:03

加林森 发表于 2022-6-2 19:11
黑牛~~~~~~~~~~~~~~

我外号

马黑黑 发表于 2022-6-2 20:04

东篱闲人 发表于 2022-6-2 19:33
漂亮！

退休金靠它了{:4_170:}

马黑黑 发表于 2022-6-2 20:04

加林森 发表于 2022-6-2 19:12
真漂亮

还行

马黑黑 发表于 2022-6-2 20:04

加林森 发表于 2022-6-2 19:12
很漂亮的制作！

一般一般班里倒数第三

查看完整版本: 月亮走我不走