浮光
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width:1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/jpg/fugl.jpg') no-repeat center/cover;
box-shadow: 4px 4px 16px #000;
overflow: hidden;
z-index: 1;
position: relative;
display: grid;
place-items: center;
}
#mplayer {
display: grid;
place-items: center;
position: absolute;
left: calc(50% - 100px);
width: 200px;
height: 200px;
cursor: pointer;
}
.doll {
position: absolute;
border-radius: 3px;
opacity: .55;
animation: rot var(--duration) var(--delay) infinite linear var(--state);
}
#vid {
position: absolute;
width: 100%;
height: 700px;
top: -60px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1394601255" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8f6f60d76.mp4" loop muted></video>
<div id="mplayer" title="播放&暂停"></div>
</div>
<script>
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: #${Math.random().toString(16).substr(-6)};
--duration: ${Math.random() * 1 + 1}s;
--delay: ${Math.random() * -2}s;
--deg: ${deg}deg;
`;
mplayer.appendChild(item);
size = setSize(size / 2);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script>
欣赏老师的新作{:4_187:} 漂亮的菱形按钮，每次刷新看它变色也很有趣呢{:4_199:} 又是有回帖奖励的，真好{:4_173:} 这样的对图形的运用，简洁又漂亮，很赞{:4_199:} 放射出来的浮光太美了，黑黑先生制作无与伦比。 欣赏黑黑老师新作，漂亮的多变按钮，收藏学习了，想套用一个玩玩！{:4_190:} 醉美水芙蓉 发表于 2024-1-10 11:33
老师这个播放器设计漂亮！刷新就变色了！
正方形的背景色随机，每次打开不一样 非常开心 发表于 2024-1-10 09:04
欣赏老师的新作
{:4_190:} 亦是金 发表于 2024-1-10 11:06
欣赏黑黑老师新作，漂亮的多变按钮，收藏学习了，想套用一个玩玩！
这个不算复杂 红影 发表于 2024-1-10 09:29
漂亮的菱形按钮，每次刷新看它变色也很有趣呢
每一次访问的菱形背景都是随机的 梦油 发表于 2024-1-10 09:46
放射出来的浮光太美了，黑黑先生制作无与伦比。
中午好 红影 发表于 2024-1-10 09:36
这样的对图形的运用，简洁又漂亮，很赞
简单而不简陋{:4_170:} 红影 发表于 2024-1-10 09:34
又是有回帖奖励的，真好
现在从银行领大钱，柜台员都会问，领钱干嘛？俺每一次回答都是，发红包。柜台员就会发呆一下下，然后继续办理业务。 马黑黑 发表于 2024-1-10 11:47
每一次访问的菱形背景都是随机的
嗯嗯，多刷几次，可以看到哪次的颜色组合更合心意{:4_173:} 马黑黑 发表于 2024-1-10 11:49
简单而不简陋
这样错位转着，真好看{:4_187:} 马黑黑 发表于 2024-1-10 11:50
现在从银行领大钱，柜台员都会问，领钱干嘛？俺每一次回答都是，发红包。柜台员就会发呆一下下，然后继续 ...
柜台员肯定被你的回答弄蒙了{:4_173:} 红影 发表于 2024-1-10 12:59
柜台员肯定被你的回答弄蒙了
不会的，她们素质很好，主要吧，可能在想：发不发给我呢{:4_170:} 红影 发表于 2024-1-10 12:59
这样错位转着，真好看
还行还行