七剑战歌

马黑黑

马黑黑

帖子代码

<style> #mydiv { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #333 url('https://638183.freep.cn/638183/t24/2/7-sword.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #333; user-select: none; overflow: hidden; z-index: 1; position: relative; } .vid { position: absolute; object-fit: cover; pointer-events: none; } .vid:nth-of-type(1) { width: 100%; height: 50%; mix-blend-mode: multiply; opacity: .3; } .vid:nth-of-type(2) { bottom: 0; width: 100%; height: 60%; mix-blend-mode: screen; opacity: .6; } #play { position: absolute; right: 100px; top: 20px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; } @Keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="mydiv">     <video class="vid" src="https://cdn.pixabay.com/video/2022/11/13/138891-770540401_large.mp4" loop muted></video>     <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c948cb571e.mp4" loop muted></video>     <img id="play" src="https://638183.freep.cn/638183/small/dcjm.webp" width="80" height="80" alt="" /> </div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29999478" autoplay loop></audio>   <script> var vids = document.querySelectorAll('.vid'); play.onclick = () => aud.paused ? aud.play() : aud.pause(); aud.onplaying = aud.onpause = () => mState(); var mState = () => {     mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);     playvid(+aud.paused); }; var playvid = (flag) => vids.forEach(vid => flag ? vid.pause() : vid.play()); </script>

马黑黑

七剑下天山没有看过，徐克的电影七剑也没看过。应该都很精彩。曲子是拉郎配弄来的，并非电影里的配乐，但也是和武侠主题相关，曲名就叫七剑战歌。

帖子的视频背景共两个，上部的视频来自知名视频分享网站，没有logo，但可能下载速度略慢一点点；下部的视频来自熊猫，有logo，但下载速度很快。视频都设置有透明度，它是有作用的：以上部视频为例，设置了合适的透明度，可以上飞翔的东东好像是在远处的效果——一定的透明度可以令透明对象“陷入”当前层级元素，使其“居后”；这个效果的营造，使用模糊，例如，ilter: blur(1px); 也行，二者配套可能更好。

南无月

一大早就七剑下天山啊收复失地呢

南无月

马黑黑 发表于 2024-4-21 08:57
七剑下天山没有看过，徐克的电影七剑也没看过。应该都很精彩。曲子是拉郎配弄来的，并非电影里的配乐，但也 ...

老师找到了可以外链除了熊猫之外的视频网站啊。。。分享个地址好不呢

南无月

搭这个小播真气势啊，又想到了成吉思汗

马黑黑

南无月 发表于 2024-4-21 09:06
老师找到了可以外链除了熊猫之外的视频网站啊。。。分享个地址好不呢

这类网站很多的，我看看我这个收藏在哪里了：

https://pixabay.com/zh/videos/

马黑黑

南无月 发表于 2024-4-21 09:04
一大早就七剑下天山啊收复失地呢

因为居家养病，把自己养胖了，有力气了

马黑黑

南无月 发表于 2024-4-21 09:07
搭这个小播真气势啊，又想到了成吉思汗

南无月

马黑黑 发表于 2024-4-21 09:08
这类网站很多的，我看看我这个收藏在哪里了：

https://pixabay.com/zh/videos/

谢谢老师，等会我去研究一下下。。
是不是比熊猫分类更清楚一点。。

南无月

马黑黑 发表于 2024-4-21 09:09
因为居家养病，把自己养胖了，有力气了

九点睡到九点有力气是自然的

南无月

马黑黑 发表于 2024-4-21 09:09

男生喜欢的武器

梦油

这音乐配得真好，大有一触即发之势。

红影

“一定的透明度可以令透明对象“陷入”当前层级元素，使其“居后”；”
的确有这样的感觉，那些雁真的像飞在人物前面的远处呢

南无月

两个视频都给了透明度，一个0.3，一个0.6，记得老师之前的贴子都不怎么用这个的。。
.vid { position: absolute; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { width: 100%; height: 50%; mix-blend-mode: multiply; opacity: .3; }
.vid:nth-of-type(2) { bottom: 0; width: 100%; height: 60%; mix-blend-mode: screen; opacity: .6; }
视频代码有三句，上部视频用了正片叠底，下部视频用了滤色。。
两个视频分开设定，十分方便。。

小文

喜欢！

红影

这帖子非常气势，七位英雄闯天下的豪气

红影

马黑黑 发表于 2024-4-21 09:08
这类网站很多的，我看看我这个收藏在哪里了：

https://pixabay.com/zh/videos/

这个里面素材还挺多的呢

马黑黑

红影 发表于 2024-4-21 10:17
这个里面素材还挺多的呢

不少的

马黑黑

红影 发表于 2024-4-21 10:12
这帖子非常气势，七位英雄闯天下的豪气

貌似你看过？