嫦娥奔月
本帖最后由 马黑黑 于 2022-11-17 07:09 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 721px);
width: 1280px;
height: 800px;
background: lightblue url('https://638183.freep.cn/638183/t22/webp/ieby.webp') no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
user-select: none;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
display: grid;
grid-template-areas:
'cur btnplay dur'
'prog prog prog';
gap: 0 4px;
place-items: end center;
font-size: 14px;
bottom: 20px;
}
#cur { grid-area: cur; color: purple; }
#dur { grid-area: dur; color: purple; }
#btnplay {
grid-area: btnplay;
display: grid;
grid-auto-flow: column;
place-items: end center;
gap: 0 4px;
height: 60px;
cursor: pointer;
}
#btnplay > span {
background: red;
width: 2px;
transition: .3s;
}
#prog {
grid-area: prog;
width: 300px;
height: 16px;
opacity: .65;
cursor: pointer;
position: relative;
}
</style>
<div id="papa">
<div id="mplayer">
<div id="cur">00:00</div>
<div id="btnplay"></div>
<div id="dur">00:00</div>
<progress id="prog" max="100"></progress>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453325911.mp3" loop autoplay></audio>
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 135px; left: 386px;" />
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 100px; top: 250px; left: 620px; transform: rotate(-60deg);" />
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 150px; top: 160px; right: 30px; transform: rotate(-35deg);" />
</div>
<script>
(function() {
(function() {
for(j=0; j<20; j++) {
let pinpu = document.createElement('span');
pinpu.className = 'pinpu';
pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
btnplay.appendChild(pinpu);
}
})();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('timeupdate', () => {
prog.value = aud.currentTime / aud.duration * 100;
cur.innerText = toMin(aud.currentTime);
dur.innerText = toMin(aud.duration);
setPinpu();
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
let setPinpu = ()=> {
let eles = document.querySelectorAll('.pinpu');
eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
};
})();
</script>
代码
<style>
#papa {
margin: 0 0 0 calc(50% - 721px);
width: 1280px;
height: 800px;
background: lightblue url('https://638183.freep.cn/638183/t22/webp/ieby.webp') no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
user-select: none;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
display: grid;
grid-template-areas:
'cur btnplay dur'
'prog prog prog';
gap: 0 4px;
place-items: end center;
font-size: 14px;
bottom: 20px;
}
#cur { grid-area: cur; color: purple; }
#dur { grid-area: dur; color: purple; }
#btnplay {
grid-area: btnplay;
display: grid;
grid-auto-flow: column;
place-items: end center;
gap: 0 4px;
height: 60px;
cursor: pointer;
}
#btnplay > span {
background: red;
width: 2px;
transition: .3s;
}
#prog {
grid-area: prog;
width: 300px;
height: 16px;
opacity: .65;
cursor: pointer;
position: relative;
}
</style>
<div id="papa">
<div id="mplayer">
<div id="cur">00:00</div>
<div id="btnplay"></div>
<div id="dur">00:00</div>
<progress id="prog" max="100"></progress>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453325911.mp3" loop autoplay></audio>
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 135px; left: 386px;" />
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 100px; top: 250px; left: 620px; transform: rotate(-60deg);" />
<img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 150px; top: 160px; right: 30px; transform: rotate(-35deg);" />
</div>
<script>
(function() {
(function() {
for(j=0; j<20; j++) {
let pinpu = document.createElement('span');
pinpu.className = 'pinpu';
pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
btnplay.appendChild(pinpu);
}
})();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('timeupdate', () => {
prog.value = aud.currentTime / aud.duration * 100;
cur.innerText = toMin(aud.currentTime);
dur.innerText = toMin(aud.duration);
setPinpu();
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
let setPinpu = ()=> {
let eles = document.querySelectorAll('.pinpu');
eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
};
})();
</script>
黑黑朋友为这件作品的配乐真是恰到好处、美不胜收。 还是头一次看黑黑做这种风格的帖子，仙袂飘飘，真是太美了{:4_199:} 三只小蝴蝶用得漂亮，和底图色彩十分协调。漂亮{:4_199:} 欣赏精美音画佳作！ 醉美水芙蓉 发表于 2022-11-17 11:42
老师的作品真是太美了！
过奖，一般般 梦油 发表于 2022-11-17 09:10
黑黑朋友为这件作品的配乐真是恰到好处、美不胜收。
还行的 红影 发表于 2022-11-17 09:45
还是头一次看黑黑做这种风格的帖子，仙袂飘飘，真是太美了
这个简单的 红影 发表于 2022-11-17 09:53
三只小蝴蝶用得漂亮，和底图色彩十分协调。漂亮
放大镜总是有用处的{:4_170:} 相约爱晚亭 发表于 2022-11-17 11:24
欣赏精美音画佳作！
感谢支持 这个漂亮，加的蝴蝶给画面增加了灵动感，音画就是加特效出来会特别美，这个老头 千羽应该会喜欢的了
@东篱闲人 @千羽 谢谢黑黑的教程分享。。。。晚上回家早就做一个 马黑黑 发表于 2022-11-17 11:55
这个简单的
虽然样式简单，但是很漂亮{:4_199:} 马黑黑 发表于 2022-11-17 11:55
放大镜总是有用处的
蝴蝶是被放大镜给网来的{:4_173:} 马黑黑 发表于 2022-11-17 11:54
还行的
很好，很好。 梦油 发表于 2022-11-17 14:31
很好，很好。
{:4_181:} 红影 发表于 2022-11-17 13:48
蝴蝶是被放大镜给网来的
差不多差不多 红影 发表于 2022-11-17 13:48
虽然样式简单，但是很漂亮
没人说简单的就不能漂亮