1 ...131415161718192021... 49下一页
返回列表 发新帖
楼主: 凡哥

[碎语] 源码小屋

[复制链接]
凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-13 07:05 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-13 10:20 编辑

2024年7月13日 星期六

妈妈的油纸伞

<style>
#tiezi {
	--width: 1300px;
	margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px));
	width: var(--width);
	height: 720px;
	background: radial-gradient(circle, rgba(244,187,68,.3), rgba(250,218,94,.3), rgba(243,229,171,.3)), black;
	background-blend-mode: overlay normal;
	box-shadow: 3px 3px 6px #111;
	overflow: hidden;
	z-index: 1;
	position: relative;
}
.ma, .player, .vid { position: absolute; }
.ma { left: 60%; top: 15%; }
.player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid {	
	bottom: 0;
	width: 100%;
	height: calc(100% + 60px);
	object-fit: cover;
	mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tiezi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118177919" autoplay loop></audio>
	<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop muted></video>
	<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
	<div id="ma" class="ma">	
		<img id="player" class="player" src="https://static.fotor.com.cn/assets/res/sticker/a6d2caa2-29fe-487d-965e-20d6512e13c2_thumb.png" alt="" />
	</div>
</div>

<script>
(function() {
	let ar = [[25,15,30,100], [45,70,150, 120]];
	ar.forEach((e,k) => {
		let clone = ma.cloneNode(true);
		let btn = clone.querySelector('#player');
		clone.id="ma" + k;
		btn.id = 'player' + k;
		btn.style.width = e[3] + 'px';
		btn.onclick = () => player.click();
		clone.style.cssText += `
			left: ${e[0]}%;
			top: ${e[1]}%;
			filter: hue-rotate(${e[2]}deg);
		`;
		tiezi.appendChild(clone);
	});
	let mState = () => {
		let players = document.querySelectorAll('.player'),
		vids = document.querySelectorAll('.vid');
		tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
		players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
		vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
	};
	aud.onplaying = aud.onpause = () => mState();
	player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

评分

2

查看全部评分

点评 收
回复

使用道具

糊涂仙儿
论
坛
称
号
✬逍遥小仙儿✬

蓝妖妖

赴山海 山之勤奋 三周年庆 新春美食 版主勋章 江湖之上 桃花朵朵 山高为峰 巳巳如意 两周年庆 守望千山 少年歌行 少年徐行 海洋之心 蝴蝶精灵 花漫千山 音画同行 中秋月圆 欢度国庆 映像2024 雪花精灵 开卷有益 我书我心 甜心百灵 星河有你 七夕之桥 樱果相依 一生安柠 幸福莓满 前兔似锦 菜源滚滚
发表于 2024-7-14 16:02 | 显示全部楼层
虽然不懂，但每一个打开都好漂亮

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-14 17:05 | 显示全部楼层

2024年7月14日 星期日

挡不住的思念

<style>
#tiezi {
	--width: 1200px;
	margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px));
	width: var(--width);
	height: 700px;
	background: navy radial-gradient(dodgerblue, transparent);
	box-shadow: 3px 3px 6px #111;
	overflow: hidden;
	z-index: 1;
	position: relative;
}
#player, .vid { position: absolute; }
#player {
	left: 45%;
	top: 30px;
	cursor: pointer;
	filter: drop-shadow(0 0 10px lightblue) invert(10%);
	transition: 1s;
	animation: rot 8s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 20px lightblue) invert(0); }
.vid {	
	bottom: 0;
	width: 100%;
	height: calc(100% + 60px);
	object-fit: cover;
	mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tiezi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2101250004" autoplay loop></audio>
	<video class="vid" src="https://img.tukuppt.com/video_show/2418175/01/76/33/6404c766070fc.mp4" autoplay loop muted></video>
	<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03031b6f8.mp4" autoplay loop muted></video>
	<img id="player" src="https://638183.freep.cn/638183/small/780.png" alt="" />
</div>

<script>
(function() {
	let mState = () => {
		let vids = document.querySelectorAll('.vid');
		tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
		player.title = ['暂停','播放'][+aud.paused];
		vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
	};
	aud.onplaying = aud.onpause = () => mState();
	player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

评分

2

查看全部评分

点评 收
回复

使用道具

柒玥

蜓蝶舞

山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋
发表于 2024-7-14 17:37 | 显示全部楼层
原来保藏都这这里啊
点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-14 20:54 | 显示全部楼层
柒玥 发表于 2024-7-14 17:37
原来保藏都这这里啊

你才发现
点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-15 08:05 | 显示全部楼层
本帖最后由 凡哥 于 2024-7-15 08:10 编辑

一生所爱

<style>
#papa {
	--width: 1024px;
	margin: 130px 0 30px calc(50% - (var(--width) / 2 + 90px));
	width: var(--width);
	height: 630px;
	background: url('https://638183.freep.cn/638183/t24/3/yiugsoai.jpg') no-repeat center/cover;
	box-shadow: inset 0 -3rem 3rem rgba(0,0,0,0.1), 0 0 0 2px rgb(20,20,20), 0.3rem 0.3em 1rem rgba(0,0,0,0.6);
	position: relative;
	display: grid;
	place-items: center;
	pointer-events: none;
}
#papa::before, #papa::after {
	position: absolute;
	content: '';
	width: 400px;
	height: 400px;
	background: radial-gradient(circle at center center, transparent 60%, rgba(0,60,128,.8) 60%) 0/40px 40px;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	animation: rot 4s var(--delay) linear infinite alternate var(--state);
	--delay: 0;
}
#papa::after { --delay: -3s; }
@keyframes rot { to { transform: rotate(10turn); } }
</style>

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

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

评分

1

查看全部评分

点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-15 08:06 | 显示全部楼层
OK？
点评 收
回复

使用道具

花简静
论
坛
称
号
随遇而安

闲花落

版主勋章 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋 樱果相依
发表于 2024-7-15 11:00 | 显示全部楼层
凡哥 发表于 2024-7-15 08:06
OK？

漂亮
点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-16 18:21 | 显示全部楼层
花简静 发表于 2024-7-15 11:00
漂亮

感谢支持
点评 收
回复

使用道具

凡哥

一坛酒

樱果相依
 楼主| 发表于 2024-7-16 18:25 | 显示全部楼层

永隔江水

<style>
#tiezi {
	--width: 1280px;
	--color: 255;
	margin: 130px 0 30px calc(50% - (var(--width) / 2 + 90px));
	width: var(--width);
	height: 720px;
	background: 
		repeating-radial-gradient(circle at center, transparent 25%, rgba(255,255,var(--color),.35) 90%) center/10% 10%,
		url('https://638183.freep.cn/638183/t24/3/jluv.jpg') no-repeat center/cover;
	box-shadow: .2rem .2em .8rem rgba(0,0,0,.45);
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
	position: relative;
}
#tiezi::before {
	position: absolute;
	content: '';
	bottom: 10px;
	left: calc(50%  - 50px);
	width: 120px;
	height: 120px;
	background: url('https://638183.freep.cn/638183/t23/btn/f3.png') no-repeat center/cover;
	pointer-events: auto;
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
.vid {
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: overlay;
}
.vid:nth-of-type(2) { left: 50%; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tiezi">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=341843" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop></audio>
	<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48d696229ec.mp4" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop muted></video>
	<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48d696229ec.mp4" autoplay loop muted></video>
</div>

<script>
var vids = document.querySelectorAll('.vid');
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
	tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
};
aud.ontimeupdate = () => tiezi.style.setProperty('--color', `${Math.floor(Math.random() * 256)}`);
tiezi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
点评 收
回复

使用道具

下一页 »
1 ...131415161718192021... 49下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表