《天策·天策府》代码
<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>
<p>《天策·天策府》一帖，播放器使用容器div元素+按钮图片做成，主要特色是双线边框响应设备指针的动画，使用容器元素的伪元素实现。播放器通过JS节点克隆技术复制多份，克隆的按钮具备原生按钮的一切属性和功能并有一定的差异性。帖子代码：<br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#ma {<span class="tBlue">margin:</span> 30px 0 30px calc(50% - 721px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 780px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/tmce.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 8px #000; <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">.pa { <span class="tBlue">position:</span> absolute; <span class="tBlue">padding:</span> 20px; <span class="tBlue">top:</span> 60px; <span class="tBlue">left:</span> 50%; }</cl-cd>
<cl-cd data-idx="4">.pa::before, .pa::after { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 100%; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">border:</span> 8px <span class="tBlue">double</span> gray; <span class="tBlue">transition:</span> .7s; <span class="tBlue">box-sizing:</span> border-box; }</cl-cd>
<cl-cd data-idx="5">.pa::before { <span class="tBlue">left:</span> 0; <span class="tBlue">top:</span> 0; <span class="tBlue">border-color:</span> skyblue transparent transparent green; }</cl-cd>
<cl-cd data-idx="6">.pa::after { <span class="tBlue">right:</span> 0; <span class="tBlue">bottom:</span> 0; <span class="tBlue">border-color:</span> transparent cyan darkred transparent; }</cl-cd>
<cl-cd data-idx="7">.<span class="tBlue">pa:</span>hover::before, .<span class="tBlue">pa:</span>hover::after { <span class="tBlue">width:</span> 80%; <span class="tBlue">height:</span> 80%; <span class="tBlue">transform:</span> skew(10deg); }</cl-cd>
<cl-cd data-idx="8">.player { <span class="tBlue">position:</span> relative; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">z-index:</span> 2; <span class="tBlue">animation:</span> rot 10s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="9">.vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 80%; <span class="tBlue">height:</span> 20%; <span class="tBlue">left:</span> 380px; <span class="tBlue">bottom:</span> -70px; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">filter:</span> blur(8px) opacity(.75); <span class="tBlue">border-radius:</span> 50% 0; <span class="tBlue">border-radius:</span> 1px solid red; }</cl-cd>
<cl-cd data-idx="10">.wave { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 480px; <span class="tBlue">top:</span> 590px; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="11">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"ma"</span>></cl-cd>
<cl-cd data-idx="15"> <span class="tGreen"><!-- 天策-天策府 --></span></cl-cd>
<cl-cd data-idx="16"> <<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>=32845636"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="17"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/15653652/01/35/15/63086d380044e.mp4"</span> autoplay loop><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="18"> <<span class="tDarkRed">img</span> class=<span class="tMagenta">"wave"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t22/gif/wave.gif"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="19"> <<span class="tDarkRed">div</span> class=<span class="tMagenta">"pa"</span>><<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> class=<span class="tMagenta">"player"</span> alt=<span class="tMagenta">""</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/earth.png"</span> /><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="20"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="21"> </cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="23">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">const</span> paNode = <span class="tRed">document</span>.querySelector(<span class="tMagenta">'.pa'</span>);</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">const</span> paData = [,];</cl-cd>
<cl-cd data-idx="26"> paData.forEach((e,k) => {</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">let</span> paClone = paNode.cloneNode(true);</cl-cd>
<cl-cd data-idx="28"> <span class="tBlue">let</span> btn = paClone.querySelector(<span class="tMagenta">'#player'</span>);</cl-cd>
<cl-cd data-idx="29"> btn.<span class="tRed">id</span> = <span class="tMagenta">'player'</span> + k;</cl-cd>
<cl-cd data-idx="30"> btn.style.width = e + <span class="tMagenta">'px'</span>;</cl-cd>
<cl-cd data-idx="31"> btn.onclick = () => player.click();</cl-cd>
<cl-cd data-idx="32"> paClone.style.cssText += `<span class="tBlue">left:</span> ${e}px; <span class="tBlue">top:</span> ${e}px; <span class="tBlue">filter:</span> hue-rotate(${e}deg);`;</cl-cd>
<cl-cd data-idx="33"> ma.appendChild(paClone);</cl-cd>
<cl-cd data-idx="34"> });</cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"> aud.onplaying = aud.onpause = () => {</cl-cd>
<cl-cd data-idx="37"> <span class="tBlue">let</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>), players = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.player'</span>);</cl-cd>
<cl-cd data-idx="38"> vids.forEach(vid => aud.paused ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="39"> ma.style.setProperty(<span class="tMagenta">'--state'</span>, aud.paused ? <span class="tMagenta">'paused'</span> : <span class="tMagenta">'running'</span>);</cl-cd>
<cl-cd data-idx="40"> players.forEach(player => player.title = [<span class="tMagenta">'点击暂停'</span>,<span class="tMagenta">'点击播放'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="41"> };</cl-cd>
<cl-cd data-idx="42"> </cl-cd>
<cl-cd data-idx="43"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="44">})();</cl-cd>
<cl-cd data-idx="45"><<span class="tDarkRed">/script</span>></cl-cd>
</div> 这个能够连着伪元素一起克隆呢，厉害了{:4_199:} 这几个带克隆的帖子，每一个都有不同，真的要好好学习一下了{:4_187:} 红影 发表于 2024-5-30 09:54
这个能够连着伪元素一起克隆呢，厉害了
深度克隆（拷贝）是可以将元素及其子元素一起克隆的，伪元素也是子元素序列 这个颜色不是一个个设置的，是滤镜整体效果。。
这个不随机啦。。 南无月 发表于 2024-5-30 12:33
这个颜色不是一个个设置的，是滤镜整体效果。。
这个不随机啦。。
随机也是可以的 马黑黑 发表于 2024-5-30 12:39
随机也是可以的
那可是太灵活了。{:4_199:} 南无月 发表于 2024-5-30 17:56
那可是太灵活了。
去弄了都行 马黑黑 发表于 2024-5-30 17:57
去弄了都行
{:4_170:}这么行那么行老师怎么整都得行 南无月 发表于 2024-5-30 18:01
这么行那么行老师怎么整都得行
{:4_203:} 马黑黑 发表于 2024-5-30 18:02
当然你啥都行。。{:4_199:} 南无月 发表于 2024-5-30 20:40
当然你啥都行。。
我不姓都，名也不叫行 马黑黑 发表于 2024-5-30 21:20
我不姓都，名也不叫行
我知道你姓常，名字叫老对{:4_170:} 南无月 发表于 2024-5-30 21:40
我知道你姓常，名字叫老对
这就对了 马黑黑 发表于 2024-5-30 21:44
这就对了
常老对啥都行{:4_170:} 南无月 发表于 2024-5-30 21:49
常老对啥都行
没这说法 马黑黑 发表于 2024-5-30 21:49
没这说法
植入人心的说法。。现在不就有了{:4_170:} 南无月 发表于 2024-5-30 21:50
植入人心的说法。。现在不就有了
不知道，没听见 马黑黑 发表于 2024-5-30 22:00
不知道，没听见
选择性听不见{:4_170:} 马黑黑 发表于 2024-5-30 12:16
深度克隆（拷贝）是可以将元素及其子元素一起克隆的，伪元素也是子元素序列
一把抓，全给弄过来了{:4_173:}