海滩

马黑黑

马黑黑

帖子代码

<style>
#mydiv {
	margin: 130px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 574px;
	background: url('https://638183.freep.cn/638183/t24/webp/seas.webp') no-repeat center/cover;
	display: grid;
	place-items: center;
	pointer-events: none;
	box-shadow: 0 0 6px rgba(0,0,0,.6);
	z-index: 1;
	position: relative;
	--conic: 2%;
}
#mydiv::after {
	position: absolute;
	content: '';
	top: 20px;
	width: 120px;
	height: 120px;
	background: repeating-conic-gradient(transparent, green, transparent var(--conic));
	-webkit-mask: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover;
	pointer-events: auto;
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
#mydiv:hover::after { --conic: 4%; }
#vid {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: linear-gradient(to bottom left, transparent, transparent, red);
}
@keyframes rot {
	to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2014710195" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted></video>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
	mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
};
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油

我真渴望到海边住上几天。

南无月

这个小播的设计可以封神了。
锥形渐变是背景，小花只是遮罩出花朵形状。。
--conic: 4%;锥形渐变鼠标触碰之后发生变化。
于是小播上的花纹也跟着改变。。

南无月

海水视频，与背景浑然一体，很高级的动态效果。
背景图片选得好，线性渐变设计的好，这个融合效果太自然了。。。
老师的设计巧夺天工。。

梦江南

老师真厉害，把静态海滩用代码变成漂亮的水动！太赞了！

老谟深虑

           谢谢老师的好代码，辛苦了！

红影

小播和视频都用到了遮罩效果呢。
小播那个尤其有趣，还能用鼠标触碰来调整线条密度，很奇妙的设想

红影

发现很多代码功能就在那，怎么样使用才能更出彩，这是个大命题，黑黑的运用实在是太赞了

红影

用遮罩留出想要的形状，这个以前用过，但是遮罩下的锥形渐变仍然能被触动，这个完全没想到了
一个非常奇妙的思路

小文

好美！欣赏先生佳作！并问好！

马黑黑

小文 发表于 2024-8-3 14:13
好美！欣赏先生佳作！并问好！

晚上好

马黑黑

梦油 发表于 2024-8-3 09:31
我真渴望到海边住上几天。

诱人的地方

马黑黑

红影 发表于 2024-8-3 13:38
发现很多代码功能就在那，怎么样使用才能更出彩，这是个大命题，黑黑的运用实在是太赞了

这个都可以尝试的

马黑黑

南无月 发表于 2024-8-3 09:34
这个小播的设计可以封神了。
锥形渐变是背景，小花只是遮罩出花朵形状。。
--conic: 4%;锥 ...

现在是完全能理解代码了，厉害

红影

马黑黑 发表于 2024-8-3 19:47
这个都可以尝试的

如何尝试，从哪个方向入手，这也很需要功夫的。

南无月

马黑黑 发表于 2024-8-3 19:47
现在是完全能理解代码了，厉害

开盲盒的方法让人进步哈。。
白老师代码厉害，教学方法也厉害。

南无月

马黑黑 发表于 2024-8-3 19:47
现在是完全能理解代码了，厉害

这个视频融合的跟了一个贴子。。
小播锥形渐变4%的样子非常好看，就放在固定显示部分了。。
让它回原位不要百分比又回不去，只能换个颜色

马黑黑

醉美水芙蓉 发表于 2024-8-3 21:37
看似简单的播放器，其实黑黑老师花了好多技巧的！