永隔-江水

马黑黑

马黑黑

帖子代码

<style>
#tiezi {
	--width: 1280px;
	--color: 255;
	margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
	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>

马黑黑

本帖：

（一）两个相同内容的视频元素横向并排，一道占满帖子平面。视频使用 overlay 滤镜将自身效果叠加到帖子中它们所在层级下的其他色彩层。

（二）帖子主元素的背景共两个，一是重复径向渐变，二是图片。 渐变背景中使用了一个CSS变量，--color，代码在第9行。--color的动态变化值将有音频控件 aud 的播放进度控制，代码在第53行。帖子运行中背景会有轻微变色，道理在这里。

（三）小播使用帖子主帖容器的伪元素 ::before 做成。

南无月

这个帖子效果轻盈飘逸～我来瞧瞧代码，猜对哪些～

南无月

[quote][url=forum.php?mod=redirect

原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～

南无月

马黑黑 发表于 2024-7-16 07:34
本帖：

（一）两个相同内容的视频元素横向并排，一道占满帖子平面。视频使用 overlay 滤镜将自身效果叠 ...

原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～

南无月

这里也出现回复重复～
颜色变化很自然流畅，效果惊艳

梦江南

按一下花一切都停止了，这朵小花控制一切，神奇！

马黑黑

梦江南 发表于 2024-7-16 09:31
按一下花一切都停止了，这朵小花控制一切，神奇！

马黑黑

南无月 发表于 2024-7-16 08:12
这个帖子效果轻盈飘逸～我来瞧瞧代码，猜对哪些～

大概都会对的吧

马黑黑

南无月 发表于 2024-7-16 08:27
这里也出现回复重复～
颜色变化很自然流畅，效果惊艳

挺厉害的样纸

马黑黑

南无月 发表于 2024-7-16 08:26
原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～

南无月

马黑黑 发表于 2024-7-16 12:08
大概都会对的吧

线性渐变没猜对～^_^
图片本身就有的色彩渐变～
最近帖子都有渐变的～

南无月

马黑黑 发表于 2024-7-16 12:08
挺厉害的样纸

你站里现在是回一次，重一次～刚又重了～真不是故意的～
早上这里也出现重复回复，是我写的别的，提交出来就是上一条～
好神经的手机啊～

南无月

马黑黑 发表于 2024-7-16 12:09

茶水真好喝～
我想说背景闪烁颜色，透亮灵动，好像跟之前的不同～9和53实现的～
居然可以只有RGB颜色三个数值里的最后一个数值发生变化～
第一次看到，神创意～
很想试试，换另外两个是不是也可以～
或者能否用两个未知的变量～

红影

rgba(255,255,var(--color),.35) 变幻这个值，原来只是在黄色的深浅里变化。
加了这个径向渐变，而且就一个颜色的变化，为什么感觉从左到右的颜色都有变化，真神奇

红影

感觉暗色的地方，径向渐变的小圆圈不见了，这个是什么原理？

红影

是视频的叠加造成的么？
这里视频的设置也很奇妙，用50% 100%就取出了中间的圆，一般人看到这样的视频会直接用border-radius: 50%来截取的吧又学了个新法子

红影

音乐好听，效果玄幻，好帖