七剑战歌
<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>
<imgid="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>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#mydiv { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> #333 url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/7-sword.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px #333; <span class="tBlue">user-select:</span> none; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">.vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="4">.<span class="tBlue">vid:</span>nth-of-type(1) { <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 50%; <span class="tBlue">mix-blend-mode:</span> multiply; <span class="tBlue">opacity:</span> .3; }</cl-cd>
<cl-cd data-idx="5">.<span class="tBlue">vid:</span>nth-of-type(2) { <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 60%; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">opacity:</span> .6; }</cl-cd>
<cl-cd data-idx="6">#play { <span class="tBlue">position:</span> absolute; <span class="tBlue">right:</span> 100px; <span class="tBlue">top:</span> 20px; <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state); <span class="tBlue">z-index:</span> 9; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="7">@Keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://cdn.pixabay.com/video/2022/11/13/138891-770540401_large.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c948cb571e.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span><span class="tRed">id</span>=<span class="tMagenta">"play"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/dcjm.webp"</span> width=<span class="tMagenta">"80"</span> height=<span class="tMagenta">"80"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=29999478"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="16"> </cl-cd>
<cl-cd data-idx="17"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="18"><span class="tBlue">var</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="19">play.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="20">aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="21"><span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="22"> mydiv.style.setProperty(<span class="tMagenta">'--state'</span>, [<span class="tMagenta">'running'</span>,<span class="tMagenta">'paused'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="23"> playvid(+aud.paused);</cl-cd>
<cl-cd data-idx="24">};</cl-cd>
<cl-cd data-idx="25"><span class="tBlue">var</span> playvid = (flag) => vids.forEach(vid => flag ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="26"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 2024-4-21 09:03 编辑
七剑下天山没有看过，徐克的电影七剑也没看过。应该都很精彩。曲子是拉郎配弄来的，并非电影里的配乐，但也是和武侠主题相关，曲名就叫七剑战歌。
帖子的视频背景共两个，上部的视频来自知名视频分享网站，没有logo，但可能下载速度略慢一点点；下部的视频来自熊猫，有logo，但下载速度很快。视频都设置有透明度，它是有作用的：以上部视频为例，设置了合适的透明度，可以上飞翔的东东好像是在远处的效果——一定的透明度可以令透明对象“陷入”当前层级元素，使其“居后”；这个效果的营造，使用模糊，例如，ilter: blur(1px); 也行，二者配套可能更好。 一大早就七剑下天山啊{:4_170:}收复失地呢 马黑黑 发表于 2024-4-21 08:57
七剑下天山没有看过，徐克的电影七剑也没看过。应该都很精彩。曲子是拉郎配弄来的，并非电影里的配乐，但也 ...
老师找到了可以外链除了熊猫之外的视频网站啊。。。分享个地址好不呢 搭这个小播真气势啊，又想到了成吉思汗{:4_170:} 南无月 发表于 2024-4-21 09:06
老师找到了可以外链除了熊猫之外的视频网站啊。。。分享个地址好不呢
这类网站很多的，我看看我这个收藏在哪里了：
https://pixabay.com/zh/videos/ 南无月 发表于 2024-4-21 09:04
一大早就七剑下天山啊收复失地呢
因为居家养病，把自己养胖了，有力气了 南无月 发表于 2024-4-21 09:07
搭这个小播真气势啊，又想到了成吉思汗
{:4_189:} 马黑黑 发表于 2024-4-21 09:08
这类网站很多的，我看看我这个收藏在哪里了：
https://pixabay.com/zh/videos/
谢谢老师，等会我去研究一下下。。
是不是比熊猫分类更清楚一点。。
马黑黑 发表于 2024-4-21 09:09
因为居家养病，把自己养胖了，有力气了
九点睡到九点有力气是自然的{:4_173:} 马黑黑 发表于 2024-4-21 09:09
男生喜欢的武器 这音乐配得真好，大有一触即发之势。{:4_199:} “一定的透明度可以令透明对象“陷入”当前层级元素，使其“居后”；”
的确有这样的感觉，那些雁真的像飞在人物前面的远处呢{:4_187:} 两个视频都给了透明度，一个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; }
视频代码有三句，上部视频用了正片叠底，下部视频用了滤色。。
两个视频分开设定，十分方便。。 喜欢！ 这帖子非常气势，七位英雄闯天下的豪气{:4_187:} 马黑黑 发表于 2024-4-21 09:08
这类网站很多的，我看看我这个收藏在哪里了：
https://pixabay.com/zh/videos/
这个里面素材还挺多的呢{:4_187:} 红影 发表于 2024-4-21 10:17
这个里面素材还挺多的呢
不少的 红影 发表于 2024-4-21 10:12
这帖子非常气势，七位英雄闯天下的豪气
貌似你看过？