论坛 › 欢乐水吧 › 石心

马黑黑 发表于 2022-5-26 12:58

石心

<style>
.mnbox {
        width: 760px; height: 560px;
        background: linear-gradient(to right bottom, teal, pink, lightseagreen);
        box-shadow: 2px 2px 8px gray;
        margin: auto; position: relative;
}
.stone {
        position: absolute; width: 150px; height: 150px;
        background-color: rgba(255,255,255,.35);
        background-image: radial-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45),rgba(255,255,255,.75));
        border-radius: 35% 65% 69% 31% / 53% 53% 47% 41%;
        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);
        display: block;
}
.setcenter { left: 10px; top: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.tobig { width: 15px; height: 15px; position: absolute; background: tan; opacity: .75; }
</style>

<div class="mnbox">
        <div class="stone setcenter"><span class="stone tobig"></span></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/07/323ae02549faa8fd493bbf6083a379bf.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let mnbox = document.querySelector('.mnbox'),
        control = document.querySelector('.stone'),
        aud = document.querySelector('#aud');
let current, task;

Array.from({length: 10}).forEach(function(ele){
        ele = document.createElement('span');
        ele.className = 'stone';
        ele.style.width = numBtween(80,100) + 'px';
        ele.style.height = numBtween(80,100) + 'px';
        ele.style.left = numBtween(150,660) + 'px';
        ele.style.top = numBtween(150,460) + 'px';
        mnbox.appendChild(ele);
});

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 = 10 * cc / tt;
        control.children.style.transform = 'scale('+ prog + ')';
}

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

</script>

马黑黑 发表于 2022-5-26 12:58

全部代码：
<style>
.mnbox {
        width: 760px; height: 560px;
        background: linear-gradient(to right bottom, teal, pink, lightseagreen);
        box-shadow: 2px 2px 8px gray;
        margin: auto; position: relative;
}
.stone {
        position: absolute; width: 150px; height: 150px;
        background-color: rgba(255,255,255,.35);
        background-image: radial-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45),rgba(255,255,255,.75));
        border-radius: 35% 65% 69% 31% / 53% 53% 47% 41%;
        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);
        display: block;
}
.setcenter { left: 10px; top: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.tobig { width: 15px; height: 15px; position: absolute; background: tan; opacity: .75; }
</style>

<div class="mnbox">
        <div class="stone setcenter"><span class="stone tobig"></span></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/07/323ae02549faa8fd493bbf6083a379bf.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let mnbox = document.querySelector('.mnbox'),
        control = document.querySelector('.stone'),
        aud = document.querySelector('#aud');
let current, task;

Array.from({length: 10}).forEach(function(ele){
        ele = document.createElement('span');
        ele.className = 'stone';
        ele.style.width = numBtween(80,100) + 'px';
        ele.style.height = numBtween(80,100) + 'px';
        ele.style.left = numBtween(150,660) + 'px';
        ele.style.top = numBtween(150,460) + 'px';
        mnbox.appendChild(ele);
});

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 = 10 * cc / tt;
        control.children.style.transform = 'scale('+ prog + ')';
}

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

</script>

东篱闲人 发表于 2022-5-26 13:02

馒头满天飞？{:5_115:}

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

东篱闲人 发表于 2022-5-26 13:02
馒头满天飞？

不多不多，够你吃一顿

东篱闲人 发表于 2022-5-26 13:15

马黑黑 发表于 2022-5-26 13:13
不多不多，够你吃一顿

还是精粉的呢。。。{:4_170:}

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

东篱闲人 发表于 2022-5-26 13:15
还是精粉的呢。。。

质量是超水准的，特供品

加林森 发表于 2022-5-26 13:43

老黑又变了啊。。。。。

醉美水芙蓉 发表于 2022-5-26 17:05

红影 发表于 2022-5-26 17:06

晶莹剔透，而且每次刷新都有新的分布方式，这些玉石太美了{:4_199:}

红影 发表于 2022-5-26 17:08

这个按钮的设计最有趣，那些白色渐渐扩散，侵蚀按钮的原本色彩，很奇妙的构思{:4_187:}

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

红影 发表于 2022-5-26 17:08
这个按钮的设计最有趣，那些白色渐渐扩散，侵蚀按钮的原本色彩，很奇妙的构思

感谢点评

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

加林森 发表于 2022-5-26 13:43
老黑又变了啊。。。。。

变变更健康

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

醉美水芙蓉 发表于 2022-5-26 17:05
很漂亮的背景！

一般一般班里倒数第三

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

红影 发表于 2022-5-26 17:06
晶莹剔透，而且每次刷新都有新的分布方式，这些玉石太美了

是很美，忍不住就又做一个

加林森 发表于 2022-5-26 19:08

马黑黑 发表于 2022-5-26 19:06
变变更健康

好的好的。

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

加林森 发表于 2022-5-26 19:08
好的好的。

是不是啊

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

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

当然是的

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

加林森 发表于 2022-5-26 19:14
当然是的

是就好，不是也好

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

当然好了啊

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

加林森 发表于 2022-5-26 19:18
当然好了啊

还好还好

查看完整版本: 石心