永隔-江水
本帖最后由 马黑黑 于 2024-7-16 07:25 编辑 <br /><br /><style>#tiezi {
--width: 1280px;
--color: 255;
margin: -35px 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> 本帖最后由 马黑黑 于 2024-7-16 07:24 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<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>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
本帖：
（一）两个相同内容的视频元素横向并排，一道占满帖子平面。视频使用 overlay 滤镜将自身效果叠加到帖子中它们所在层级下的其他色彩层。
（二）帖子主元素的背景共两个，一是重复径向渐变，二是图片。 渐变背景中使用了一个CSS变量，--color，代码在第9行。--color的动态变化值将有音频控件 aud 的播放进度控制，代码在第53行。帖子运行中背景会有轻微变色，道理在这里。
（三）小播使用帖子主帖容器的伪元素 ::before 做成。 这个帖子效果轻盈飘逸～我来瞧瞧代码，猜对哪些～ [url=forum.php?mod=redirect
原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～ 马黑黑 发表于 2024-7-16 07:34
本帖：
（一）两个相同内容的视频元素横向并排，一道占满帖子平面。视频使用 overlay 滤镜将自身效果叠 ...
原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～ 这里也出现回复重复～
颜色变化很自然流畅，效果惊艳 按一下花一切都停止了，这朵小花控制一切，神奇！ 梦江南 发表于 2024-7-16 09:31
按一下花一切都停止了，这朵小花控制一切，神奇！
{:4_190:} 南无月 发表于 2024-7-16 08:12
这个帖子效果轻盈飘逸～我来瞧瞧代码，猜对哪些～
大概都会对的吧 南无月 发表于 2024-7-16 08:27
这里也出现回复重复～
颜色变化很自然流畅，效果惊艳
挺厉害的样纸 南无月 发表于 2024-7-16 08:26
原来只有径向渐变加图片～没有左右的线性渐变～
两个一样的视频铺满背景，梦幻又挺吸睛～
{:4_180:} 马黑黑 发表于 2024-7-16 12:08
大概都会对的吧
线性渐变没猜对～^_^
图片本身就有的色彩渐变～
最近帖子都有渐变的～ 马黑黑 发表于 2024-7-16 12:08
挺厉害的样纸
你站里现在是回一次，重一次～刚又重了～真不是故意的～
早上这里也出现重复回复，是我写的别的，提交出来就是上一条～
好神经的手机啊～ 马黑黑 发表于 2024-7-16 12:09
茶水真好喝～
我想说背景闪烁颜色，透亮灵动，好像跟之前的不同～9和53实现的～
居然可以只有RGB颜色三个数值里的最后一个数值发生变化～
第一次看到，神创意～
很想试试，换另外两个是不是也可以～
或者能否用两个未知的变量～ rgba(255,255,var(--color),.35) 变幻这个值，原来只是在黄色的深浅里变化。
加了这个径向渐变，而且就一个颜色的变化，为什么感觉从左到右的颜色都有变化，真神奇{:4_204:} 感觉暗色的地方，径向渐变的小圆圈不见了，这个是什么原理？ 是视频的叠加造成的么？
这里视频的设置也很奇妙，用50% 100%就取出了中间的圆，一般人看到这样的视频会直接用border-radius: 50%来截取的吧{:4_173:}又学了个新法子{:4_187:} 音乐好听，效果玄幻，好帖{:4_199:}
页:
[1]
2