空行不羁

马黑黑 发表于 2024-1-20 14:07

马黑黑 发表于 2024-1-20 14:08

代码
<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/jpg/kxbj.jpg') no-repeat center/cover;
box-shadow: 4px 4px 12px rgba(0,0,0,.7);
border: 1px solid gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
clip-path: inset(52% 0 0 0);
}
#player {
position: absolute;
left: calc(50% - 100px);
top: 20%;
width: 200px;
height: 200px;
cursor: pointer;
mix-blend-mode: overlay;
animation: rot 6s infinite linear var(--state);
}
li-zi {
position: absolute;
bottom: -20px;
width: 20px;
height: 20px;
border-radius: 50%;
background-image: radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .5));
box-shadow: inset 0 0 6px #fff;
opacity: 1;
}
@keyframes rise {
20% { transform: translate(0,-20px); opacity: .8; }
40% { transform: translate(var(--x1), -20px); opacity: .6; }
100% { transform: translate(var(--x2), -360px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1879108774" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/71/5b48b6cbb4677.mp4" loop muted></video>
<img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
</div>

<script>
(function() {
let tt = 60;
Array.from({length: tt}).forEach((lz,idx) => {
   lz = document.createElement('li-zi');
   lz.style.cssText += `
         --x1: ${Math.random() < 0.5 ? -60 : 60}px;
         --x2: ${Math.random() < 0.5 ? -160 : 160}px;
         left: ${Math.floor((1024 - 30) * Math.random())}px;
         animation: rise ${Math.random() * 6 + 6}s ${Math.random() * -3}s infinite var(--state);
   `;
   mydiv.prepend(lz);
});

let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

樵歌发表于 2024-1-20 14:40

轮子转动，水波荡漾。一加分分，一切停止了{:4_203:}

红影发表于 2024-1-20 16:09

mix-blend-mode: overlay; 这个混合是叠加，让按钮由黑色变成了漂亮的蓝{:4_187:}

红影发表于 2024-1-20 16:11

视频的裁剪恰到好处，而且混合滤色让那些倒影都还保留着呢{:4_187:}

红影发表于 2024-1-20 16:18

粒子的设计最见功夫，在不同的时段运行的方式和透明度的设计，看着那么神奇。错落有致，不单调{:4_199:}

红影发表于 2024-1-20 16:25

音乐也好奇特，很有种玄妙的味道，也有种力量的感觉，很震撼，有种风起云涌的感觉{:4_199:}

起个网名好难 发表于 2024-1-20 16:32

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

梦油发表于 2024-1-20 17:18

水中的气泡此起彼伏很耐看，漂亮！

马黑黑 发表于 2024-1-20 17:50

梦油发表于 2024-1-20 17:18
水中的气泡此起彼伏很耐看，漂亮！

{:4_190:}

马黑黑 发表于 2024-1-20 18:04

起个网名好难发表于 2024-1-20 16:32

{:4_190:}

马黑黑 发表于 2024-1-20 18:06

樵歌发表于 2024-1-20 14:40
轮子转动，水波荡漾。一加分分，一切停止了

不会吧？重来而已，然后，如果你的浏览器不允许自动播放，你需要点击一下轮子。

马黑黑 发表于 2024-1-20 18:06

红影发表于 2024-1-20 16:09
mix-blend-mode: overlay; 这个混合是叠加，让按钮由黑色变成了漂亮的蓝

这个看出来了

马黑黑 发表于 2024-1-20 18:07

红影发表于 2024-1-20 16:11
视频的裁剪恰到好处，而且混合滤色让那些倒影都还保留着呢

inset剪出矩形，咔擦一下就好

马黑黑 发表于 2024-1-20 18:08

红影发表于 2024-1-20 16:18
粒子的设计最见功夫，在不同的时段运行的方式和透明度的设计，看着那么神奇。错落有致，不单调

不单调在于几个随机数值，开始运行的时间、左右行进的数值

马黑黑 发表于 2024-1-20 18:08

红影发表于 2024-1-20 16:25
音乐也好奇特，很有种玄妙的味道，也有种力量的感觉，很震撼，有种风起云涌的感觉

音乐很有韵味

亦是金 发表于 2024-1-20 20:18

欣赏老师的精美帖，要学习的东西多多，只能慢慢琢磨试用！谢谢老师的代码！{:4_180:}

马黑黑 发表于 2024-1-20 20:46

亦是金发表于 2024-1-20 20:18
欣赏老师的精美帖，要学习的东西多多，只能慢慢琢磨试用！谢谢老师的代码！

js部分需要较坚实的基础，不过很多都是我们帖子里的通用代码，慢慢消化，而后补一下CSS相关知识，一切就很开朗。

樵歌发表于 2024-1-20 20:51

马黑黑发表于 2024-1-20 18:06
不会吧？重来而已，然后，如果你的浏览器不允许自动播放，你需要点击一下轮子。

現在又好了。

马黑黑 发表于 2024-1-20 20:57

樵歌发表于 2024-1-20 20:51
現在又好了。

{:4_191:}

页: [1] 2 3 4

花潮论坛's Archiver

空行不羁