【黑师代码】大年初一给大家拜年啦！新年快乐！

花简静

花简静

<style>
#papa {
	margin: 10px 0 10px calc(50% - 931px);
	width: 1700px;
	height: 900px;
      top:130px;
	box-shadow: 4px 8px 28px gray;
	background: url('https://pic.imgdb.cn/item/658c21a2c458853aef00e803.webp') no-repeat center/cover;
	overflow: hidden;
	z-index: 1;
	position: relative;
	--state: paused;
}

#player, #clone_player1 {
	position: absolute;
	left: 100px;
	top: 200px;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: url('https://pic.imgdb.cn/item/6472da4af024cca17331746b.gif') no-repeat center/cover;
	mix-blend-mode: screen;
    opacity: .89;
	cursor: pointer;
	z-index: 199;
	animation: rotating 6s infinite alternate linear var(--state);
}
#clone_player1{
	left: 1466px;
	top: 430px;
	width: 180px;
	height: 180px;
	background: url('https://pic.imgdb.cn/item/658bf39dc458853aef551008.gif') no-repeat center/cover;
	filter: opacity(.99);
}
li-zi {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: navy;
	opacity: .99;
	animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid1 {
	position: absolute;
	width: 100%;
	height: 110%;
	opacity: .66;
	top:-80px;
	object-fit: cover;
	mix-blend-mode: screen;
	pointer-events: none;
}
#vid {
	position: absolute;
	left: 120px;
	top: 220px;
	width: 660px;
	height: 660px;
	border-radius: 50%;
	mix-blend-mode: normal;
	object-fit: cover;
	pointer-events: none;
}
@keyframes moving {
	from { transform: translate(var(--x0),var(--y0)); }
	to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
	<video id="vid" src="https://img.tukuppt.com/video_show/00/09/47/64feadfab3612.mp4" autoplay loop muted></video>
	<video id="vid1" src="https://img.tukuppt.com/video_show/10/11/11/4/6585463a98457.mp4" autoplay loop muted></video>

	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=431794892" autoplay loop></audio>
	<div id="player"></div>
	<div id="clone_player1"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
	let rad0 = (Math.PI / 180) * 360 / total * key,
		rad1 = (Math.PI / 180) * (180 + (360 / total * key));
	item = document.createElement('li-zi');
	item.style.cssText += `
		--x0: ${r + r * Math.cos(rad0)}px;
		--y0: ${r + r * Math.sin(rad0)}px;
		--x1: ${r + r * Math.cos(rad1)}px;
		--y1: ${r + r * Math.sin(rad1)}px;
		--duration: ${2 + Math.random() * 3}s;
		--delay: -${Math.random() * 5}s;
		background: url('https://pic.imgdb.cn/item/6579ac10c458853aef031383.png') no-repeat center/cover;
	`;
	player.appendChild(item);
});

let mState = () => {
	aud.paused ?
		(papa.style.setProperty('--state','paused'), vid.pause()) :
		(papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>






    

花简静

在2024年春节来临之际，愿你的人生之旅中充满阳光与欢笑。愿你的未来比昨天更加美好，愿你的道路比前路更加宽广。祝你春节快乐，万事顺遂！

花简静

祝福朋友们新年快乐！

醉美水芙蓉

花花新年快乐！

独钓雪

这个效果也很酷

碧海

简静这个特效很精彩，问好，简静新春快乐!

花简静

醉美水芙蓉 发表于 2024-2-10 21:16
花花新年快乐！

芙蓉新年快乐

花简静

独钓雪 发表于 2024-2-10 22:19
这个效果也很酷

独钓雪新年快乐

花简静

碧海 发表于 2024-2-10 23:39
简静这个特效很精彩，问好，简静新春快乐!

碧海新年快乐