论坛 › 欢乐水吧 › 日月同辉

马黑黑 发表于 2022-5-26 19:52

日月同辉

<style>
.mnbox {
        left: -70px; width: 900px; height: 600px; background-color: tomato;
        background-image:
                radial-gradient(circle at 50% 20%, rgba(250,100,100,.85) 80px,transparent 80px),
                radial-gradient(circle at 50% 68%, rgba(250, 100, 100, .15) 60px,transparent 60px),
                linear-gradient(-175deg,transparent, gray, lightseagreen);
        background-blend-mode: multiply, overlay, normal;
        box-shadow: 4px 4px 20px gray;opacity: .75; filter: blur(1px); position: relative;
}
.mnbox meter { margin: 10px; cursor: pointer; }
.what {
        width: 20px; height: 10px; left: 50%; bottom: 10%;
        border-radius: 10% 100%; background: #ccc;
        display: block; opacity: .35; filter: blur(1px); position: absolute;
        animation: up 6s linear infinite alternate;
}
.moon {
        width: 100px; height: 100px; border-radius: 50%; right: 50px;
        box-shadow: 20px 20px 0 0 #ccc; position: absolute;
}
@keyframes up { to { transform: translate(50px, 30px); opacity: 0; } }
</style>

<div class="mnbox">
        <div class="moon"></div>
        <meter id="meter" value="0" min="0" max="100" low="22" high="60" optimum="70" ></meter>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1923981645.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let mnbox = document.querySelector('.mnbox'), meter = document.querySelector('#meter'), aud = document.querySelector('#aud');
let task = 2000, current;

Array.from({length: 100}).forEach(ele =>{
        ele = document.createElement('span');
        ele.className = 'what';
        ele.style.left = numBtween(10, 800) + 'px';
        ele.style.top = numBtween(400, 550) + 'px';
        mnbox.appendChild(ele);
});


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

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

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        meter.value = prog;
}
function numBtween(min,max){
        return (Math.floor(Math.random() * (max-min+1)) + min);
}

</script>

马黑黑 发表于 2022-5-26 19:54

bgbox 类名称在论坛中不能使用

红影 发表于 2022-5-26 20:03

太阳还有倒影呢，漂亮{:4_187:}

红影 发表于 2022-5-26 20:04

水里的是什么，鱼么？

加林森 发表于 2022-5-26 20:14

哇噻，老黑的这个播放器好玩。厉害厉害！{:4_199:}

马黑黑 发表于 2022-5-26 20:14

加林森 发表于 2022-5-26 20:14
哇噻，老黑的这个播放器好玩。厉害厉害！

这是h5的元素

马黑黑 发表于 2022-5-26 20:17

红影 发表于 2022-5-26 20:04
水里的是什么，鱼么？

可以尽情想象

加林森 发表于 2022-5-26 20:18

马黑黑 发表于 2022-5-26 20:14
这是h5的元素

嗯嗯，挺好的。漂亮！

马黑黑 发表于 2022-5-26 20:18

红影 发表于 2022-5-26 20:03
太阳还有倒影呢，漂亮

隐隐约约

马黑黑 发表于 2022-5-26 20:21

加林森 发表于 2022-5-26 20:18
嗯嗯，挺好的。漂亮！

它主要是用来表现进度

加林森 发表于 2022-5-26 20:26

马黑黑 发表于 2022-5-26 20:21
它主要是用来表现进度

嗯嗯，空了我跟你学到制作一个。

梦油 发表于 2022-5-26 20:48

那忽隐忽现的浪花（是浪花吗？）和隐隐约约的太阳倒影，增加了作品的魅力。

                                       {:4_199:}

马黑黑 发表于 2022-5-26 21:16

梦油 发表于 2022-5-26 20:48
那忽隐忽现的浪花（是浪花吗？）和隐隐约约的太阳倒影，增加了作品的魅力。

                           ...

是不是浪花我也不清楚，所以CSS选择器里用的是 what

马黑黑 发表于 2022-5-26 21:17

加林森 发表于 2022-5-26 20:26
嗯嗯，空了我跟你学到制作一个。

这个简单的

加林森 发表于 2022-5-26 21:26

马黑黑 发表于 2022-5-26 21:17
这个简单的

嗯嗯。我要到好歌曲才行啊。

绿叶清舟 发表于 2022-5-26 21:30

下面的点再小点可以变成星星的吧

马黑黑 发表于 2022-5-26 21:47

绿叶清舟 发表于 2022-5-26 21:30
下面的点再小点可以变成星星的吧

星星的话，小而圆就成，但它们应该在上空

马黑黑 发表于 2022-5-26 21:48

加林森 发表于 2022-5-26 21:26
嗯嗯。我要到好歌曲才行啊。

不急慢慢来

加林森 发表于 2022-5-26 21:51

马黑黑 发表于 2022-5-26 21:48
不急慢慢来

嗯嗯。谢谢老黑！

马黑黑 发表于 2022-5-26 21:52

加林森 发表于 2022-5-26 21:51
嗯嗯。谢谢老黑！

做时尽量去理解代码的含义，不要稀里糊涂

查看完整版本: 日月同辉