明镜菩提（to绿叶清舟）
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 680px; background: url('https://638183.freep.cn/638183/t24/1/mkjk.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; inset: -230px; background: rgba(0,0,100,.15) url('https://638183.freep.cn/638183/t24/1/mkjk.jpg') no-repeat center/cover; mix-blend-mode: screen; filter: hue-rotate(260deg) opacity(.45); transform-origin: 70% 0; transform: rotate(10deg); animation: swear 4s infinite alternate var(--state); }
#papa::after { position: absolute; content: ''; right: 100px; bottom: 138px; width: 4px;height: 75px; background: white; z-index: -1; }
#btnplay { position: absolute; right: 40px; bottom: 150px; width: 128px; height: 128px; background: url('https://638183.freep.cn/638183/t23/btn/windmill.png'); cursor: pointer; animation: rot 6s linear infinite var(--state); }
#btnFs { position: absolute; right: 10px; top: 10px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 100; }
#vid { position: absolute; right: 2px; bottom: 0; width: 200px; height: 140px; object-fit: cover; border-radius: 60% 60% 0 0; cursor: pointer; }
@keyframes swear { to { transform: rotate(-5deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2402/2689eeb142253d2c53edffe3718cb8e5EC.mp3"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/19/5d19651c535f9.mp4" muted loop></video>
<div id="btnFs">全屏观赏</div>
<div id="btnplay"></div>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/api/iy-fs-btn.js';
document.querySelector('body').appendChild(sF);
vid.onclick = () => aud.paused ? aud.play() : aud.pause();
</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> 0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 680px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/mkjk.jpeg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">position:</span> relative; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3"> #papa::before { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">inset:</span> -230px; <span class="tBlue">background:</span> rgba(0,0,100,.15) url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/mkjk.jpg'</span>) no-repeat center/cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">filter:</span> hue-rotate(260deg) opacity(.45); <span class="tBlue">transform-origin:</span> 70% 0; <span class="tBlue">transform:</span> rotate(10deg); <span class="tBlue">animation:</span> swear 4s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> #papa::after { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">right:</span> 100px; <span class="tBlue">bottom:</span> 138px; <span class="tBlue">width:</span> 4px;<span class="tBlue">height:</span> 75px; <span class="tBlue">background:</span> white; <span class="tBlue">z-index:</span> -1; }</cl-cd>
<cl-cd data-idx="5"> #btnplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">right:</span> 40px; <span class="tBlue">bottom:</span> 150px; <span class="tBlue">width:</span> 128px; <span class="tBlue">height:</span> 128px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t23/btn/windmill.png'</span>); <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="6"> #btnFs { <span class="tBlue">position:</span> absolute; <span class="tBlue">right:</span> 10px; <span class="tBlue">top:</span> 10px; <span class="tBlue">color:</span> silver; <span class="tBlue">background:</span> none; <span class="tBlue">opacity:</span> 0; <span class="tBlue">border:</span> 2px solid silver; <span class="tBlue">border-radius:</span> 6px; <span class="tBlue">padding:</span> 4px; <span class="tBlue">transition:</span> all .75s; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">z-index:</span> 100; }</cl-cd>
<cl-cd data-idx="7"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">right:</span> 2px; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 140px; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">border-radius:</span> 60% 60% 0 0; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="8"> @keyframes swear { to { <span class="tBlue">transform:</span> rotate(-5deg); } }</cl-cd>
<cl-cd data-idx="9"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="10"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="11"><br></cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://file.uhsea.com/2402/2689eeb142253d2c53edffe3718cb8e5EC.mp3"</span>></<span class="tDarkRed">audio</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/2418175/00/08/19/5d19651c535f9.mp4"</span> muted loop></<span class="tDarkRed">video</span>></cl-cd>
<cl-cd data-idx="15"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnFs"</span>>全屏观赏</<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="16"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="17"></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="18"><br></cl-cd>
<cl-cd data-idx="19"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="20"><span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="21">sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="22">sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/iy-fs-btn.js'</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">vid.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="25"></<span class="tDarkRed">script</span>></cl-cd>
</div> 本帖最后由 马黑黑 于 2024-2-29 12:12 编辑 <br /><br /><style>
.mydiv { margin: 20px auto; font-size: 18px; overflow: hidden; position: relative; }
.mydiv ::selection { background: rgba(50,120,50,.35); }
.mydiv mark { background: lightblue; padding: 0 4px; }
</style>
<div class="mydiv">
<h2>关于纯音乐帖子JS独立资源</h2>
<p>iy-btn-fs JS独立模块适用于纯音乐或不带lrc歌词的帖子。它由<mark>播放控制器+全屏</mark>两个部分组成，两个按钮可以是任意可视元素，约定播放控制器<mark>id="btnplay"</mark>，全屏按钮<mark>id="btnFs"</mark>，此外，帖子父元素约定<mark>id="papa"</mark>（是不是传说中的约法三章）。模块的主要功能是控制音频和视频播放暂停，同时提供全屏控制开关并接管CSS的 --state 变量。使用时请参照如下帖子代码结构：<br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #btnplay { <span class="tBlue">position:</span> absolute; }</cl-cd>
<cl-cd data-idx="4"> #btnFs { <span class="tBlue">position:</span> absolute; }</cl-cd>
<cl-cd data-idx="5"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="6"><br></cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="8"> <<span class="tDarkRed">audio</span> src=<span class="tMagenta">"音频地址"</span>></<span class="tDarkRed">audio</span>></cl-cd>
<cl-cd data-idx="9"> <span class="tGreen"><!-- video src=<span class="tMagenta">"视频地址"</span> muted loop></video --></span></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnFs"</span>>全屏观赏</<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="12"></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="13"><br></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="16"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="17"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/iy-fs-btn.js'</span>;</cl-cd>
<cl-cd data-idx="18"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="19"></<span class="tDarkRed">script</span>></cl-cd>
</div>
<h2>上述代码：</h2>
<p>JS部分是调用资源。</p>
<p>HTML部分，音频和视频可以不要id，web页里的第一个 audio 是JS模块管理的对象，页面中的所有视频也都将接受管理，视频是否静音（muted）根据需要决定，循环播放（loop）必须，自动播放（autoplay）不建议；代码中，video标签处于注释状态，使用时自行修改；id="papa"的div是帖子元素，其id是全屏的操控依赖；全屏按钮和播放按钮必须使用示范代码设置id，不论使用的是div还是img或其他的。</p>
<p>CSS部分，对应HTML标签设计，这里仅列出position定位属性，按父元素relative子元素absolute的方式设置，以方便帖子布局；#btnplay 以及其他选择器，如果调用关键帧动画属性 animation 设置有 var(--state)，则它们控制下的动画将能与音频的播放暂停同步。</p>
</div>
生日礼物独辟蹊径，高！{:5_116:} 今天是清舟的生日，黑黑是掐日子送礼{:4_170:} 美美的效果，清舟收礼开心 小辣椒 发表于 2024-2-29 12:55
今天是清舟的生日，黑黑是掐日子送礼
应该的应该的，毕竟四年才过一次{:4_170:} 小辣椒 发表于 2024-2-29 12:56
美美的效果，清舟收礼开心
{:4_180:} 梦油 发表于 2024-2-29 12:12
生日礼物独辟蹊径，高！
{:4_180:} 欣赏老师的梦幻制作{:4_178:}
美极了，无论音乐和画面 相得益彰{:4_199:} 今天是正日子，祝@绿叶清舟 生日快乐！{:4_176:} 仔细看了光束效果，原来是一张有颜色的图片进行通过滤镜再转动角度实现彩色光束移动。。
惊叹，这样也可以。。老师创意太厉害 了。{:4_199:}
与《一切如常》光束的实现方式完全不同 这次视频裁剪的形状也特别。。
和大风车搭起来，像是风车驱动视频移动。。。
这两个元素比较童趣 南无月 发表于 2024-2-29 17:11
这次视频裁剪的形状也特别。。
和大风车搭起来，像是风车驱动视频移动。。。
这两个元素比较童趣
严格来讲不是剪裁，是用了 border-radius 属性，圆角属性。 南无月 发表于 2024-2-29 17:09
仔细看了光束效果，原来是一张有颜色的图片进行通过滤镜再转动角度实现彩色光束移动。。
惊叹，这样也可以 ...
这个大家都可以想得到的 南无月 发表于 2024-2-29 17:05
今天是正日子，祝@绿叶清舟 生日快乐！
{:4_180:} 马黑黑 发表于 2024-2-29 18:29
严格来讲不是剪裁，是用了 border-radius 属性，圆角属性。
好哒。。。就是可以实现有圆角还有方角。。{:4_173:}这个好看 马黑黑 发表于 2024-2-29 18:29
这个大家都可以想得到的
对哒，你就是大家。。{:4_173:}只有大家能想到 马黑黑 发表于 2024-2-29 18:30
谢茶，绿茶不敢喝。。。{:4_173:} 南无月 发表于 2024-2-29 18:32
对哒，你就是大家。。只有大家能想到
{:4_172:}