加林森 发表于 2022-3-14 22:24

本帖最后由 加林森 于 2022-5-27 21:30 编辑 <br /><br />小九 发表于 2022-3-14 22:22
就像看视频一样，有动感。队长技能越来越熟练了
都是跟老黑学习的。谢谢小九支持！{:4_204:}{:4_190:}

<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="bgDiv">
      <div class="ball">
                <div></div>
                <div></div>
      </div>
      <img src="https://pic.imgdb.cn/item/6290d156094754312926f943.jpg" alt="" />
</div>
<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="http://www.kumeiwp.com/sub/filestores/2022/05/25/64856e611c427329ec723668b7621d52.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-3-14 23:13

队长又出新花样图了，效果很好{:4_187:}

千羽 发表于 2022-3-14 23:15

晃动的画面，表情好似痛苦的歌手……挺好的{:4_199:}

马黑黑 发表于 2022-3-14 23:29

加林森 发表于 2022-3-14 21:39
哈哈哈哈，这个还真不容易。

试试看吧

加林森 发表于 2022-3-14 23:36

千羽 发表于 2022-3-14 23:13
队长又出新花样图了，效果很好

谢谢千羽支持！{:4_187:}

加林森 发表于 2022-3-14 23:37

千羽 发表于 2022-3-14 23:15
晃动的画面，表情好似痛苦的歌手……挺好的

跟到学习的结果。

加林森 发表于 2022-3-14 23:37

马黑黑 发表于 2022-3-14 23:29
试试看吧

头像嘛？

马黑黑 发表于 2022-3-14 23:38

加林森 发表于 2022-3-14 23:37
头像嘛？

不是不是，他有一个动脚的帖子，挺好的

加林森 发表于 2022-3-14 23:41

马黑黑 发表于 2022-3-14 23:38
不是不是，他有一个动脚的帖子，挺好的

你发给我看看。

红影 发表于 2022-3-15 12:09

加林森 发表于 2022-3-14 21:23
就是，老黑越来越厉害了。

队长的这个帖子选图很好，让移动效果展现得非常完美{:4_187:}

加林森 发表于 2022-3-15 12:13

红影 发表于 2022-3-15 12:09
队长的这个帖子选图很好，让移动效果展现得非常完美

嗯嗯，也是找了许久才找到的。

红影 发表于 2022-3-15 21:56

加林森 发表于 2022-3-15 12:13
嗯嗯，也是找了许久才找到的。

嗯嗯，很赞{:4_187:}

加林森 发表于 2022-3-15 22:21

红影 发表于 2022-3-15 21:56
嗯嗯，很赞

谢谢！{:4_190:}
页: 1 [2]
查看完整版本: 《望》 - 周深 （根据老黑的教程制作）感谢老黑！