[特效音画] 水

马黑黑 · 发表于 2024-9-6 07:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-9-6 07:49

帖子代码

<style>
#tz {
	margin: 30px 0 30px calc(50% - 721px);
	position: relative;
	width: 1280px;
	height: 700px;
	background: url('https://638183.freep.cn/638183/t24/4/water.jpg') no-repeat center/cover;
	box-shadow: 4px 4px 10px #000;
	user-select: none;
	z-index: 1;
}
#player {
	left: 45%;
	top: 40px;
	width: 160px;
	height: 200px;
	display: grid;
	place-items: center;
	cursor: pointer;
	animation: rot linear 8s infinite var(--state);
	position: absolute;;
}
#player::after {
	position: absolute;
	content: '';
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: linear-gradient(orange,cyan);
}
#vid {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	opacity: .5;
	mix-blend-mode: screen;
	-webkit-mask: linear-gradient(transparent 20%, red 25%, red 0);
}
.ellipse {
	--deg: 0deg;
	position: absolute;
	width: 50%;
	height: 20%;
	background: #ff003380;
	border: 2px solid cyan;
	border-radius: 0  100%  25% 50%;
	filter: drop-shadow(0 0 16px #fff);
	transform: rotate(var(--deg)) translateX(-40px);
}
@keyframes rot { to { transform: rotate(-1turn); filter: hue-rotate(360deg); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=460793376" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/29/13/53/31/video5feac45b722c5.mp4" autoplay loop muted></video>
	<div id="player" draggable="true" title="支持拖曳"></div>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
	papa: '#tz',
	css: 'left: 20px; bottom: 20px; --fsBg: transparent; --color: white;', 
});
Array(total = 6).fill('').forEach((elm,idx) => {
	elm = document.createElement('span');
	elm.className = 'ellipse';
	elm.style.cssText += `
		--deg: ${360 / total * idx}deg;
		background: #${Math.random().toString(16).substring(2,8)}a0;
	`;
	player.appendChild(elm);
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
player.ondragend = (e) => {
	var rect = tz.getBoundingClientRect();
	var left = e.clientX - rect.left - 80, top = e.clientY - rect.top - 80;
	if(left < 0) left = 0;
	if(left > rect.width - 160) left = rect.width - 160;
	if(top < 0) top = 0;
	if(top > rect.height - 160) top = rect.height - 160;
	player.style.left = left + 'px';
	player.style.top = top + 'px';
};
tz.ondragover = (e) => e.preventDefault();
</script>