源码小屋

凡哥

花简静 发表于 2024-8-31 09:38
我的我的我的天花板，咋看都完美

代码漂亮吧

花简静

凡哥 发表于 2024-8-31 11:44
代码漂亮吧

可漂亮可漂亮了，
主要是代码画出来的画面漂亮

凡哥

2024年9月1日 星期日

湖光山色

<style>
#papa {
	margin: 220px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/webp2/hgus.webp') no-repeat center/cover;
	box-shadow: 3px 3px 20px #000;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}
#papa > video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
	-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
	transform: rotateX(180deg);
	pointer-events: none;
}
</style>

<div id="papa">
	<video src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f2ae929323.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);

sf.onload = () => {
	HCPlayer({
		papa: '#papa',
		musics: music_ar,
		title: '湖光山色',
		player_css: `
			bottom: 10px;
			background: none;
			border: thick double lightgreen;
			color: white;
			--ww: 300px;
			--hh: 140px;
			--track: green;
			--prog: lightgreen;
		`,
		fs_css: 'top: 20px;',
	});
};
var music_ar = [
	['222637/2024/08/28/c3464afc51d696721c5ed8085837f32f.mp3', '碧水微风媚太湖'],
	['222632/2024/08/28/2679435327c3ba30f1d990dc0e4cf7ed.mp3', '佛光山水普陀山'],
	['222634/2024/08/28/5142066a9d0dfbab7fe9bac130330fd6.mp3', '天水一色青海湖'],
	['222636/2024/08/28/975bb85a12e5471d3d8a7ffaae08b23a.mp3', '天籁天音绕天山'],
	['222638/2024/08/28/dc3ba38d18328297328dffa5998fe065.mp3', '水天浩渺洞庭湖'],
	['222639/2024/08/28/28fce04e4dbc71b738b32d71bff67c83.mp3', '银河烟雨挂庐山'],
	['222640/2024/08/28/02f3d2fb77b2c667f14ecaf5d1a6b5c9.mp3', '云门七彩峨眉山'],
	['222631/2024/08/28/b23b15f1a9ed1ccb8bcc31d77cabe772.mp3', '诗韵悠悠秀漓江'],
	['222641/2024/08/28/1cb244a9bc6b096ebaf9ab0bba9fb479.mp3', '清音玉露月牙泉'],
	['222635/2024/08/28/7a5f7863c3103d66c8243f6b61258b18.mp3', '雅鲁藏布江'],
	['222633/2024/08/28/715e39bd4faaaa17bb8a88a532dcd359.mp3', '云海清泉奇黄山'],
].map(item => {
	item[0] = 'https://www.kumeiwp.com/wj/' + item[0];
	return item;
});
</script>

花简静

凡哥 发表于 2024-9-1 08:19
2024年9月1日 星期日
湖光山色

这个小播更好 看，透亮得很。

凡哥

花简静 发表于 2024-9-2 22:08
这个小播更好 看，透亮得很。

同一个的，配置不一样而已

凡哥

2024年9月3日 星期二

秋日私语

<style>
#papa {
	margin: 30px 0 30px calc(50% - 603px);
	display: grid;
	place-items: center;
	width: 1024px;
	height: 570px;
	background: url('https://638183.freep.cn/638183/t24/webp2/qrsy.webp') no-repeat center/cover;
	box-shadow: 0 0 8px #333;
	overflow: hidden;
	position: relative;
}
li-zi {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: snow;
	box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
	position: absolute;
	width: 60px;
	height: 60px;
	filter: drop-shadow(0 0 1px darkgreen);
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
.leaf {
	position: absolute;
	left: -50%;
	top: -50%;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, yellow, darkgreen);
	border-radius: 100% 50%;
	opacity: .95;
	transform-origin: 100% 100%;
	transform: rotate(var(--deg)) translateY(60px);
}

@keyframes moving {
	from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
	to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>

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

<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

Array(total=5).fill('').forEach((i,k) => {
	i = document.createElement('span');
	i.className = 'leaf';
	i.style.cssText += `--deg: ${360/total * k}deg;`;
	player.appendChild(i);
});

for(var i = 0, all = 80; i < all; i++) {
	let lz = document.createElement('li-zi');
	let hudu = Math.PI / 180 * 360 / all * i;
	let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 5 + 5);
	lz.style.cssText += `
		--x0: ${xx}px;
		--y0: ${yy}px;
		width: ${size}px;
		height: ${size}px;
		animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
	`;
	papa.prepend(lz);
}

aud.onplaying = aud.onpause = () => mState();

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

花简静

凡哥 发表于 2024-9-3 18:26
同一个的，配置不一样而已

风格大不相同。。。这个配置也够灵活的了。

凡哥

花简静 发表于 2024-9-3 21:50
风格大不相同。。。这个配置也够灵活的了。

凡哥

2024年9月4日 星期三

愿情

<style>
#mydiv {
	margin: 220px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 700px;
	background: url('https://638183.freep.cn/638183/t24/webp2/yrqk.webp') no-repeat center/cover;
	box-shadow: 0 0 8px #0000008f;
	position: relative;
}
.player {
	--size: 160px;
	position: absolute;
	width: var(--size);
	height: var(--size);
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
.player > span {
	position: absolute;
	left: calc(var(--size) / 4);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
	border-color: transparent lightblue steelblue transparent;
	transform-origin: 100% 100%;
	filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 60px; top:  20px; }
.player:nth-of-type(2) { left: 60px; bottom: 20px; }
.player:nth-of-type(3) { left: calc(50% - 80px); bottom: calc(50% - 80px); }
#vid {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: .95;
	object-fit: cover;
	mix-blend-mode: screen;
	-webkit-mask: radial-gradient(circle, transparent 160px, red 220px, red 0);
	pointer-events: none;
}
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=424496456" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e2867ce8a.mp4" autoplay loop muted></video>
	<div class="player"></div>
	<div class="player"></div>
	<div class="player"></div>
</div>

<script>
var players = mydiv.querySelectorAll('.player');

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

createPlayers = (elms) => {
	elms.forEach(elm => {
		Array(total = 5).fill(0).forEach((s,k) => {
			s = document.createElement('span');
			s.style.transform = `rotate(${360 / total * k}deg)`;
			elm.appendChild(s);
		});
	});
};

createPlayers(players);

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

花简静

凡哥 发表于 2024-9-4 13:15

赚到一杯咖啡，喝了就走