马黑黑 发表于 2022-5-25 21:10

石头

<style>
.wrap {
        left: -70px;
        width: 900px;
        height: 598px;
        background: lightblue url('/data/attachment/forum/202205/25/200546g466z462hjqhpz2t.jpg');
        position: relative;
}
.stone {
        position: absolute; display: block;
        background-color: rgba(255,255,255,.35);
        background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65));
        border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;
        box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9);
}
.control { width: 80px; height: 200px; bottom: 10px; left: 10px; cursor: hand; transform: rotate(20deg); }

</style>

<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/22/763057ed6e56b57a54214282519d72ed.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="wrap">
        <div class="stone control"></div>
</div>

<script>

let wrap = document.querySelector('.wrap');
let aud = document.querySelector('#aud');
let str = '';

for(j = 0; j < 15; j++){
        str += `<span class="stone" style="width: ${numBtween(40,80)}px; height: ${numBtween(40,80)}px; left: ${numBtween(100,850)}px; top: ${numBtween(460,540)}px;"></span>\n`;
}
wrap.innerHTML += str;
console.log(str);
let control = document.querySelector('.control');
let current, task;

control.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;
        control.style.backgroundImage = `linear-gradient(to top,red ${prog}%, transparent 0, #eee)`;
}

function numBtween(min,max){ return Math.floor(Math.random() * (max-min+1)) + min; }

</script>

小满 发表于 2022-5-25 21:12

坐个大沙发

小满 发表于 2022-5-25 21:13

鹅卵石吗{:5_117:}

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

小满 发表于 2022-5-25 21:12
坐个大沙发

{:4_174:}

小满 发表于 2022-5-25 21:13

左下边那个？

马黑黑 发表于 2022-5-25 21:14

小满 发表于 2022-5-25 21:13
鹅卵石吗

这种石子很罕见，俺们南充才有

马黑黑 发表于 2022-5-25 21:14

小满 发表于 2022-5-25 21:13
左下边那个？

会染色

小满 发表于 2022-5-25 21:21

马黑黑 发表于 2022-5-25 21:14
这种石子很罕见，俺们南充才有

又跑南充去了，没郫县了{:5_117:}

马黑黑 发表于 2022-5-25 21:22

小满 发表于 2022-5-25 21:21
又跑南充去了，没郫县了

差不多差不多

加林森 发表于 2022-5-25 21:32

老黑这个制作真有意思，第一个石头就是播放器，另外的装饰的。{:4_199:}

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

加林森 发表于 2022-5-25 21:32
老黑这个制作真有意思，第一个石头就是播放器，另外的装饰的。

做的匆忙，没仔细修饰

加林森 发表于 2022-5-25 21:59

挺好的。

醉美水芙蓉 发表于 2022-5-25 22:03

红影 发表于 2022-5-25 22:10

全代码的石头，染尘个红色的比较吓人呢{:4_173:}

红影 发表于 2022-5-25 22:11

又是一个带进度条的，这些半透明的石头都是玉石呢{:4_199:}

马黑黑 发表于 2022-5-25 22:15

红影 发表于 2022-5-25 22:11
又是一个带进度条的，这些半透明的石头都是玉石呢

刚从土里挖出来

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

红影 发表于 2022-5-25 22:10
全代码的石头，染尘个红色的比较吓人呢

本来是弄成绿色的，有个小错误，改来改去就变成红色了

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

醉美水芙蓉 发表于 2022-5-25 22:03
欣赏黑黑老师新作品！

{:4_180:}

加林森 发表于 2022-5-25 22:32

我这里看见是白色的石头。随着就不错了红色的了。挺好的。

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

加林森 发表于 2022-5-25 22:32
我这里看见是白色的石头。随着就不错了红色的了。挺好的。

新发的石心，不那么吓人
页: [1] 2
查看完整版本: 石头