源码小屋

凡哥

出埃及记一帖，主要特色是对视频进行 mask 蒙版处理

花简静

凡哥 发表于 2024-7-23 13:43
出埃及记一帖，主要特色是对视频进行 mask 蒙版处理

线性渐变效果太棒啦

凡哥

花简静 发表于 2024-7-23 21:15
线性渐变效果太棒啦

每一种渐变都会有各自的用途

凡哥

2024年7月24日 星期三

克罗地亚狂想曲（6首随机连播）

<style>
#mydiv {
	margin: 230px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 600px;
	background: url('https://638183.freep.cn/638183/t24/webp/kldy.webp') no-repeat center/cover;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	z-index: 1;
	position: relative;
}
#mydiv::before, #mydiv::after {
	position: absolute;
	content: '';
	top: 50px;
	width: 120px;
	height: 120px;
	background: repeating-conic-gradient(orange 2%, yellow 4%, orange 6%);
	box-shadow: inset 0 0 10px red;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
	animation: rot 4s linear infinite var(--state);
}
#mydiv::before { left: 50px; filter: invert(.2); }
#mydiv::after { right: 50px; top: 100px; filter: invert(.3); }
#vid {
	position: absolute;
	width: 100%;
	height: 200px;
	object-fit: cover;
	-webkit-mask: radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv" title="播放/暂停">
	<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/71/5b48b547041bd.mp4" autoplay loop muted></video>
</div>

<script>
var songs = ['1920932653','1412187718','569144091','1377428317','1930426297', '407042026'].map(s => 'https://music.163.com/song/media/outer/url?id=' + s);
const rd_play = (ar,audio) => audio.src = ar[Math.floor(Math.random() * ar.length)];
var aud = document.createElement('audio');
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
}
aud.onended = () => rd_play(songs,aud);
aud.autoplay = true;
mydiv.appendChild(aud);
rd_play(songs, aud);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

凡哥

2024年7月25日 星期四

Moola Mantra

<style>
#papa {
	margin: 30px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 600px;
	background: url('https://638183.freep.cn/638183/t24/2/moma.jpg') no-repeat center/cover;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	z-index: 1;
	position: relative;
}
#player {
	position: absolute;
	bottom: -60px;
	left: calc(50% - 265px);
	width: 300px;
	height: 300px;
	border: 6px solid orange;
	border-radius: 50%;
	cursor: pointer;
	transform: rotateX(60deg);
	--tt: 6s;
}
#player::before, #player::after {
	position: absolute;
	content: '';
	border: inherit;
	border-radius: inherit;
	animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
	inset: 20px;
	border-color: transparent gold;
}
#player::after {
	inset: 40px;
	border-width: 12px;
	border-style: dashed;
	--tt: 4s;
}
li-zi {
	position: absolute;
	width: 10px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 10px red;
}
@keyframes moving {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-800px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
	<!-- Moola Mantra -->
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=19277603" autoplay loop></audio>
	<div id="player" title="播放/暂停" class="loading"></div>
</div>

<script>
var all = 100;
for(var i = 0; i < all; i++) {
	var lz = document.createElement('li-zi');
	lz.style.cssText += `
		left: ${ 60 + Math.floor(Math.random() * 160)}px;
		top: ${ 60 + Math.floor(Math.random() * 160)}px;
		background: #${Math.random().toString(16).substring(2,8)};
		animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 4}s cubic-bezier(0.01, 0.12, 0.6, 1.04) infinite var(--state);
	`;
	player.prepend(lz);
}
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花简静

凡哥 发表于 2024-7-24 07:56
每一种渐变都会有各自的用途

工具一样，哪个比较合适，就用哪一个。。但我发现合起来用效果也挺好

花简静

凡哥 发表于 2024-7-25 08:15
2024年7月25日 星期四
Moola Mantra

有一说一，这个贴子是真美。。
我打算跟贴，打了三个草稿都不如原贴。
还是没出来

凡哥

花简静 发表于 2024-7-26 18:08
工具一样，哪个比较合适，就用哪一个。。但我发现合起来用效果也挺好

有道理

花简静

凡哥 发表于 2024-7-27 08:43
有道理

赞成

凡哥

花简静 发表于 2024-7-27 12:25
赞成

辛苦了