窒息
<style>#papa { left: -214px; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t22/webp/vixi.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; --opt: .8; z-index: 1; }
#papa::before { position: absolute; content: ''; background: url('https://638183.freep.cn/638183/t22/gif/121.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#papa::after { position: absolute; content: '窒\a息'; white-space:pre; font: bold 3em sans-serif; color: #ccc; top: 20px; right: 30px; text-shadow: 2px 2px 4px #000; }
#mplayer { position: absolute; bottom: 10px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
#btnplay { font: bold 40px / 40px serif; text-align: center; color: snow; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; animation: rot linear 3s infinite; }
#prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid tan; border-radius: 6px; background: snow; opacity: .55; cursor: pointer; position: relative; }
#prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, pink, red); opacity: .75; }
#audtime { font: normal 14px sans-serif; color: snow; }
@keyframes opa { to { opacity: 0; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay">✹</span>
<span id="prog"></span>
<span id="audtime">00:00 | 00:00</span>
</div>
</div>
<script>
(function() {
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=454035505.mp3';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('seeked', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;prog.style.setProperty('--ww', prg + 'px');audtime.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused',papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState = 'running', papa.style.setProperty('--opt','.8'));
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;}
})();
</script>
欣赏、点赞！
又有新花样了，学习。 好神奇，这个小动图的运行，导致底图看着也像是动的。真的感觉那双手在缓缓地拉塑料布呢{:4_187:} 很神奇的视觉感受。 这些小动图都很有趣，黑黑是从哪里找到这么多好玩的动图的{:4_173:} 醉美水芙蓉 发表于 2022-10-25 11:47
黑黑老师动图做得真漂亮！
{:4_190:} 起个网名好难 发表于 2022-10-25 07:41
欣赏、点赞！
又有新花样了，学习。
这些对你来说应该都是玩腻了的 醉美水芙蓉 发表于 2022-10-25 11:47
欣赏黑黑老师新作品！
{:4_191:} 红影 发表于 2022-10-25 09:01
好神奇，这个小动图的运行，导致底图看着也像是动的。真的感觉那双手在缓缓地拉塑料布呢
手摸意外发现的，花了20元钱拍下的 红影 发表于 2022-10-25 09:10
这些小动图都很有趣，黑黑是从哪里找到这么多好玩的动图的
叫东篱做呀 红影 发表于 2022-10-25 09:10
很神奇的视觉感受。
我做好后自己查看效果，有窒息感 欣赏精美音画佳作！ 目之所及，感觉窒息慢动中来，迎面有揪心效果，艺术得很！大赏！ 黑黑每个主题都是那么的精致，这个图意和音乐名称很相符 上来就晓得有黑黑的新作，好棒、·{:4_178:} 这个播放器不是字符了吧，晚上试一下，制作了可以发微信 谢谢黑黑精彩分享，辛苦了 小辣椒 发表于 2022-10-25 17:01
黑黑每个主题都是那么的精致，这个图意和音乐名称很相符
音乐就叫窒息