心灵音乐 - 舞者

马黑黑 · 发表于 2024-2-18 18:15

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

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

x

HUACHAO LRC

马黑黑 · 发表于 2024-2-18 18:17

代码

<style>
#mydiv {
	margin: 0 0 0 calc(50% - 593px);
	position: relative;
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/1/18u.jpg') no-repeat center/cover;
	box-shadow: 3px 3px 8px gray;
	overflow: hidden;
}
#mydiv::before {
	position: absolute;
	content: '';
	inset: 0;
	background: repeating-linear-gradient(transparent, green 2px) repeat;
	opacity: .45;
	animation: up 10s ease-in-out infinite alternate var(--state);
}
#lrc {
	position: absolute;
	left: 20px;
	top: 10px;
	font: bold 2.4em sans-serif;
	color: gray;
	text-shadow: 1px 1px 1px rgba(0,0,0,.45);
	--ani: lrcGo1;
	--duration: 1s;
}
#lrc::before {
	position: absolute;
	content: attr(data-lrc);
	width: 100%;
	height: 100%;
	color: transparent;
	background: repeating-linear-gradient(60deg, transparent, orange 20px);
	background-clip: text;
	-webkit-background-clip: text;
	clip-path: inset(0 100% 0 0);
	animation: var(--ani) var(--duration) linear forwards var(--state);
}
#btnplay {
	position: absolute;
	right: 20px;
	bottom: 10px;
	width: 200px;
	height: 200px;
	animation: rotating 6s linear infinite var(--state);
	cursor: pointer;
}
ye-zi {
	position: absolute;
	left: calc(50% - 0.5 * var(--ww));
	top: 0;
	width: var(--ww);
	height: 100px;
	border-radius: 0% 100%;
	background: linear-gradient(snow, orange, green);
	transform-origin: 50% 100%;
	transform: rotate(var(--deg));
}
@keyframes up {
	0% { inset: 0; }
	25% { inset: 50% 0 50% 0; }
	50% { inset: 0; }
	75% { inset: 0 50% 0 50%; }
	100% { inset: 0; }
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="mydiv">
	<audio src="https://music.163.com/song/media/outer/url?id=1401905670" autoplay loop></audio>
	<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
	<div id="btnplay"></div>
</div>

<script>
var geci = [ [2,"心灵音乐 - 舞者",3], [340,"",1] ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);

Array.from({length: all = 5}).forEach((item,key) => {
	item = document.createElement('ye-zi');
	item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
	btnplay.prepend(item);
});
</script>