外文歌曲 你不在 （学习套用黑黑月背播放器效果）
<style>
#pa { margin: 130px 0 30px calc(50% - 718px); width: 1274px; height: 647px; background: url('https://file.uhsea.com/2410/07dbfa2ba25453a2f5ef5ddf0d396dd6ES.gif') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.ell { ffill: transparent; stroke: Magenta; stroke-width: 8; filter: opacity(.5) drop-shadow(50px 0 72px navy); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state); }
.ell:hover { stroke-width: 12; }
#vid { position: absolute; width: 100%; height: 100%; boject-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask: linear-gradient(to top right, red 88%, transparent 0); opacity: 0.25;}
@keyframes bigger { to { rx: 60; ry: 30; } }
</style>
<div id="pa">
<audio id="aud" src="https://file.uhsea.com/2410/5f4ff36749f5a16e5de8160cdefddac2Z5.mp3 " autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp" autoplay loop muted></video>
<svg id="svg1" width="100%" height="100%"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=' + new Date().getTime();
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#svg1');
Array(total = 5).fill().forEach((_,key) => {
let cx = 500 / total * key + 155,
cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30,
delay = `${-1 * Math.random()}`;
dr.ellipse(cx , cy, 20, 40).set('class', 'ell').style(`--delay: ${delay}s`);
});
aud.onplaying = aud.onpause = () => mState();
var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
};
</script> @马黑黑
黑黑套用玩一个月背播放器效果 感谢黑黑源码分享{:4_187:} 胡乱捣鼓一个，现成的动图{:4_170:} 这个小播的颜色调得特别好，和背景动图颜色很能呼应呢。
背景制作也漂亮。欣赏亲爱的好帖{:4_199:} 标题字也很漂亮，像带着风一样。还有漂亮的小频谱。
这个暂停的时候动图不停的，记得亲爱的可以让所有的都暂停的呢{:4_204:} 红影 发表于 2024-10-29 21:34
标题字也很漂亮，像带着风一样。还有漂亮的小频谱。
这个暂停的时候动图不停的，记得亲爱的可以让所有的都 ...
这个是纯套用黑黑的代码，黑黑代码就是没有一键停止的 红影 发表于 2024-10-29 21:31
这个小播的颜色调得特别好，和背景动图颜色很能呼应呢。
背景制作也漂亮。欣赏亲爱的好帖
亲爱的，旧图修改一下就发了，求速度的 这个粒子效果真壮观。。。炸裂的感觉。。漂亮。{:4_199:} 小辣椒你的图我现在都能看到了，真是开心 欣赏美帖 小辣椒 发表于 2024-10-29 21:36
这个是纯套用黑黑的代码，黑黑代码就是没有一键停止的
嗯，因为没用动图的缘故吧。 小辣椒 发表于 2024-10-29 21:37
亲爱的，旧图修改一下就发了，求速度的
亲爱的身体不好还做了这么多帖子，真不容易{:4_187:} 小辣椒 发表于 2024-10-29 21:07
@马黑黑
黑黑套用玩一个月背播放器效果
你这是多态的动画效果，挺厉害的
欣赏外文歌曲，体会异域风情。 美不胜收！太厉害了 欣赏美贴，点赞！
厉害！
页:
[1]