青色
<style>#papa { margin: 30px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: cyan url('https://638183.freep.cn/638183/t24/1/cyan.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#btnplay { position: absolute; left: 10px; top: 10px; width: 80px; height: 80px; border: 2px dotted cyan; border-radius: 50%; box-shadow: inset 0 0 20px #00ffff; transition: 6s; animation: rot 8s linear infinite var(--state); }
#papa:fullscreen #btnplay { width: 150px; height: 150px; }
#papa video { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: .6; mix-blend-mode: darken; pointer-events: none; }
#papa > video { border-radius: 0 30% 0 0; mix-blend-mode: normal; filter: opacity(.35); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1474770161" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2475824/00/02/16/5b53eaca0f2f5.mp4" loop muted></video>
<div id="btnplay">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/01/65/6126376f1df40.mp4" loop muted></video>
</div>
</div>
<script>
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({papa: '#papa', css: '--bg: transparent; --color: cyan; bottom: 10px; left: 48%;'});
let playVideo = (flag) => { let vids = document.querySelectorAll('#papa video'); vids.forEach(vid => { flag ? vid.play() : vid.pause(); }); };
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),btnplay.title = '点击播放',vid.pause(),playVideo(false)) : (papa.style.setProperty('--state','running'),btnplay.title = '点击暂停',vid.play(),playVideo(true));
let getOffsetPos = (ele) => { let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent; while(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } return {x, y}; };
aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
let movTimer = null, paWidth = papa.clientWidth, sonSize = btnplay.clientWidth, bodyWidth = document.body.clientWidth, paOffset = getOffsetPos(papa).x;
document.onmousemove = function(e) {clearTimeout(movTimer); movTimer = setTimeout(function() { if (e.target.id === "btnplay" || e.target.id == 'btnFs') return; if (document.fullscreenElement === null) { let x = e.pageX; if (x < paOffset) x = paOffset; x = x - paOffset; if (x + sonSize >= paWidth) x = paWidth - sonSize; btnplay.style.cssText += `left: ${x}px;`; } else { let xx = e.offsetX || e.layerX; if (xx + sonSize > bodyWidth) xx -= sonSize; btnplay.style.cssText += `left: ${xx - 75}px;`; } }, 400); };
})();
</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"> #papa { <span class="tBlue">margin:</span> 30px 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> cyan url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/cyan.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">position:</span> relative; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3"> #btnplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 10px; <span class="tBlue">top:</span> 10px; <span class="tBlue">width:</span> 80px; <span class="tBlue">height:</span> 80px; <span class="tBlue">border:</span> 2px dotted cyan; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">box-shadow:</span> inset 0 0 20px #00ffff; <span class="tBlue">transition:</span> 6s; <span class="tBlue">animation:</span> rot 8s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> #<span class="tBlue">papa:</span>fullscreen #btnplay { <span class="tBlue">width:</span> 150px; <span class="tBlue">height:</span> 150px; }</cl-cd>
<cl-cd data-idx="5"> #papa video { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 100%; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">opacity:</span> .6; <span class="tBlue">mix-blend-mode:</span> darken; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="6"> #papa > video { <span class="tBlue">border-radius:</span> 0 30% 0 0; <span class="tBlue">mix-blend-mode:</span> normal; <span class="tBlue">filter:</span> opacity(.35); }</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">"papa"</span>></cl-cd>
<cl-cd data-idx="11"> <<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>=1474770161"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2475824/00/02/16/5b53eaca0f2f5.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>></cl-cd>
<cl-cd data-idx="14"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/15653652/01/01/65/6126376f1df40.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="15"> <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="19"> (<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="21"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="22"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="23"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="24"> sF.onload = () => FS({<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, <span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">--bg:</span> transparent; <span class="tBlue">--color:</span> cyan; <span class="tBlue">bottom:</span> 10px; <span class="tBlue">left:</span> 48%;'</span>});</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">let</span> playVideo = (flag) => { <span class="tBlue">let</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'#papa video'</span>); vids.forEach(vid => { flag ? vid.play() : vid.pause(); }); };</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">let</span> mState = () => aud.paused ? (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'paused'</span>),btnplay.title = <span class="tMagenta">'点击播放'</span>,vid.pause(),playVideo(false)) : (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'running'</span>),btnplay.title = <span class="tMagenta">'点击暂停'</span>,vid.play(),playVideo(true));</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">let</span> getOffsetPos = (ele) => { <span class="tBlue">let</span> x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent; <span class="tBlue">while</span>(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } <span class="tBlue">return</span> {x, y}; };</cl-cd>
<cl-cd data-idx="28"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="29"> btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">let</span> movTimer = null, paWidth = papa.clientWidth, sonSize = btnplay.clientWidth, bodyWidth = <span class="tRed">document</span>.body.clientWidth, paOffset = getOffsetPos(papa).x;</cl-cd>
<cl-cd data-idx="31"> <span class="tRed">document</span>.onmousemove = <span class="tBlue">function</span>(e) {clearTimeout(movTimer); movTimer = setTimeout(<span class="tBlue">function</span>() { <span class="tBlue">if</span> (e.target.<span class="tRed">id</span> === <span class="tMagenta">"btnplay"</span> || e.target.<span class="tRed">id</span> == <span class="tMagenta">'btnFs'</span>) <span class="tBlue">return</span>; <span class="tBlue">if</span> (<span class="tRed">document</span>.fullscreenElement === null) { <span class="tBlue">let</span> x = e.pageX; <span class="tBlue">if</span> (x < paOffset) x = paOffset; x = x - paOffset; <span class="tBlue">if</span> (x + sonSize >= paWidth) x = paWidth - sonSize; btnplay.style.cssText += `<span class="tBlue">left:</span> ${x}px;`; } <span class="tBlue">else</span> { <span class="tBlue">let</span> xx = e.offsetX || e.layerX; <span class="tBlue">if</span> (xx + sonSize > bodyWidth) xx -= sonSize; btnplay.style.cssText += `<span class="tBlue">left:</span> ${xx - 75}px;`; } }, 400); };</cl-cd>
<cl-cd data-idx="32"> })();</cl-cd>
<cl-cd data-idx="33"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
青黑黑。{:4_173:}那飞的是代码鸟吧 这个青色直接代码画的虚线圆圈住的视频呢，很附合青色的定义。原本还在想难道会有青色的太阳？其实不是的，而是漂亮的效果{:4_199:} 这个背景图漂亮，虚线构筑的世界。按钮的虚线更是一脉相承。
按钮还能全屏时放大，更完美了{:4_187:} 用border-radius: 0 30% 0 0;去掉视频logo也是种新方法呢。另一个视频被按钮约束，倒是不用设置了。
两个视频的使用也是新的方法呢，大于号的使用不太熟悉{:4_173:} 已经五色了，还剩两色{:4_205:} 前景貌似高楼大厦，后景大森林，
层层叠叠，有股子神秘感哈~~{:4_178:} 相当漂亮，学习下{:4_190:} 朵拉 发表于 2024-3-13 16:05
相当漂亮，学习下
{:4_190:} 樵歌 发表于 2024-3-13 14:58
青黑黑。那飞的是代码鸟吧
{:4_172:} 红影 发表于 2024-3-13 15:42
这个青色直接代码画的虚线圆圈住的视频呢，很附合青色的定义。原本还在想难道会有青色的太阳？其实不是的， ...
不一定总是太阳的，@樵歌 说瓜皮也可以{:4_170:} 红影 发表于 2024-3-13 15:43
这个背景图漂亮，虚线构筑的世界。按钮的虚线更是一脉相承。
按钮还能全屏时放大，更完美了
{:4_190:} 朵拉 发表于 2024-3-13 16:02
前景貌似高楼大厦，后景大森林，
层层叠叠，有股子神秘感哈~~
{:4_191:} 红影 发表于 2024-3-13 15:51
已经五色了，还剩两色
完了吧？七彩虹现在因为气候问题简化了，只有五彩虹了 红影 发表于 2024-3-13 15:49
用border-radius: 0 30% 0 0;去掉视频logo也是种新方法呢。另一个视频被按钮约束，倒是不用设置了。
两个 ...
举个轻轻的栗子：
#papa img { ... } ，这个表示，id="papa" 元素下的全部 img 标签，包含子子孙孙；
#papa > img { ... } ，这个表示，id="papa" 元素下第一代即儿子 img 标签，隔代的不管。
帖子总共两个视频，按钮里用的那个是孙子（按钮元素是papa的div儿子），做背景用的视频是儿子video 这里用的大背景视频有点暗夜森林的样子，跟前面的代码高楼合起来，科技加梦幻效果一下子出来了。。 马黑黑 发表于 2024-3-13 16:26
举个轻轻的栗子：
#papa img { ... } ，这个表示，id="papa" 元素下的全部 img 标签，包含子子孙孙；
...
看了这个回复，原来视频也有层级之分。。
只是一个视频要跟鼠标移动，另一个背景视频不动。。
代码也能分别指挥，也是厉害 。。
老师就是色彩大师，所有视频图片，滤镜综合运用叠加起来，效果绝佳。。{:4_199:} 南无月 发表于 2024-3-13 18:23
老师就是色彩大师，所有视频图片，滤镜综合运用叠加起来，效果绝佳。。
可能是刚刚运气好