《天策·天策府》代码 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 马黑黑教程专版 › 《天策·天策府》代码

马黑黑 发表于 2024-5-30 08:01

《天策·天策府》代码

<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>

红影发表于 2024-5-30 09:54

这个能够连着伪元素一起克隆呢，厉害了{:4_199:}

红影发表于 2024-5-30 09:57

这几个带克隆的帖子，每一个都有不同，真的要好好学习一下了{:4_187:}

马黑黑 发表于 2024-5-30 12:16

红影发表于 2024-5-30 09:54
这个能够连着伪元素一起克隆呢，厉害了

深度克隆（拷贝）是可以将元素及其子元素一起克隆的，伪元素也是子元素序列

南无月 发表于 2024-5-30 12:33

这个颜色不是一个个设置的，是滤镜整体效果。。
这个不随机啦。。

马黑黑 发表于 2024-5-30 12:39

南无月发表于 2024-5-30 12:33
这个颜色不是一个个设置的，是滤镜整体效果。。
这个不随机啦。。

随机也是可以的

南无月 发表于 2024-5-30 17:56

马黑黑发表于 2024-5-30 12:39
随机也是可以的

那可是太灵活了。{:4_199:}

马黑黑 发表于 2024-5-30 17:57

南无月发表于 2024-5-30 17:56
那可是太灵活了。

去弄了都行

南无月 发表于 2024-5-30 18:01

马黑黑发表于 2024-5-30 17:57
去弄了都行

{:4_170:}这么行那么行老师怎么整都得行

马黑黑 发表于 2024-5-30 18:02

南无月发表于 2024-5-30 18:01
这么行那么行老师怎么整都得行

{:4_203:}

南无月 发表于 2024-5-30 20:40

马黑黑发表于 2024-5-30 18:02

当然你啥都行。。{:4_199:}

马黑黑 发表于 2024-5-30 21:20

南无月发表于 2024-5-30 20:40
当然你啥都行。。

我不姓都，名也不叫行

南无月 发表于 2024-5-30 21:40

马黑黑发表于 2024-5-30 21:20
我不姓都，名也不叫行

我知道你姓常，名字叫老对{:4_170:}

马黑黑 发表于 2024-5-30 21:44

南无月发表于 2024-5-30 21:40
我知道你姓常，名字叫老对

这就对了

南无月 发表于 2024-5-30 21:49

马黑黑发表于 2024-5-30 21:44
这就对了

常老对啥都行{:4_170:}

马黑黑 发表于 2024-5-30 21:49

南无月发表于 2024-5-30 21:49
常老对啥都行

没这说法

南无月 发表于 2024-5-30 21:50

马黑黑发表于 2024-5-30 21:49
没这说法

植入人心的说法。。现在不就有了{:4_170:}

马黑黑 发表于 2024-5-30 22:00

南无月发表于 2024-5-30 21:50
植入人心的说法。。现在不就有了

不知道，没听见

南无月 发表于 2024-5-30 22:09

马黑黑发表于 2024-5-30 22:00
不知道，没听见

选择性听不见{:4_170:}

红影发表于 2024-5-30 22:52

马黑黑发表于 2024-5-30 12:16
深度克隆（拷贝）是可以将元素及其子元素一起克隆的，伪元素也是子元素序列

一把抓，全给弄过来了{:4_173:}

页: [1] 2 3

查看完整版本: 《天策·天策府》代码