花简静贴子代码及说明汇总（翻页有新贴）

花简静 · 发表于 2024-10-27 20:28

本帖最后由花简静于 2024-11-2 22:24 编辑

花简静 · 发表于 2024-11-3 14:11

本帖最后由花简静于 2024-12-22 21:56 编辑

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

<cl-cd data-idx="1"><style></cl-cd>

<cl-cd data-idx="2"> #mydiv { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20241102ylxb06.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; overflow: hidden;}</cl-cd>

<cl-cd data-idx="3"> #msvg { position: absolute; left: calc(50% - 60px); bottom: 180px; cursor: pointer; animation: rot 1s linear infinite var(--state); }</cl-cd>

<cl-cd data-idx="4"> #msvg ellipse { transition: .5s; }</cl-cd>

<cl-cd data-idx="5"> #msvg:hover ellipse { ry: 20; }</cl-cd>

<cl-cd data-idx="6"> #vid { position: absolute; width: 30%; height: 30%;bottom:230px;left:630px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent); pointer-events: none;opacity: 0.43; }</cl-cd>

<cl-cd data-idx="7"> #vid1 { position: absolute; width: 100%; height: 100%; bottom:-20px;object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 20%, red 50%, red 0); pointer-events: none;opacity: 0.23; }</cl-cd>

<cl-cd data-idx="8"> #fsbtn { position: absolute; left: 5%; bottom: 20px; color: #859777; background: transparent; padding: 4px 6px; border: 2px solid #859777; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }</cl-cd>

<cl-cd data-idx="9"> @keyframes rot { to { transform: rotate(360deg); } }</cl-cd>

<cl-cd data-idx="10"></style></cl-cd>

<cl-cd data-idx="11"> </cl-cd>

<cl-cd data-idx="12"><div id="mydiv"></cl-cd>

<cl-cd data-idx="13"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1941982" autoplay loop></audio></cl-cd>

<cl-cd data-idx="14"> <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/19/04/19/14/38/07/video5cb96ccfb4f1a.mp4" autoplay loop muted></video></cl-cd>

<cl-cd data-idx="15"> <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_preview/23/09/25/19/09/43/video65116a7746f5a.mp4" autoplay loop muted></video></cl-cd>

<cl-cd data-idx="16"> <svg id="msvg" width="200" height="200"></svg></cl-cd>

<cl-cd data-idx="17"> <span id="fsbtn"></span></cl-cd>

<cl-cd data-idx="18"></div></cl-cd>

<cl-cd data-idx="19"> </cl-cd>

<cl-cd data-idx="20"><script type="module"></cl-cd>

<cl-cd data-idx="21">var sc = document.createElement('script');</cl-cd>

<cl-cd data-idx="22">sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';</cl-cd>

<cl-cd data-idx="23">document.body.appendChild(sc);</cl-cd>

<cl-cd data-idx="24"> </cl-cd>

<cl-cd data-idx="25">sc.onload = () => {</cl-cd>

<cl-cd data-idx="26"> var dr = _dr('#msvg');</cl-cd>

<cl-cd data-idx="27"> dr.defs('defs');</cl-cd>

<cl-cd data-idx="28"> dr.g('g1').addTo('defs');</cl-cd>

<cl-cd data-idx="29"> dr.ellipse(100,100,20,8,'none','#a59a82',1).addTo('g1');</cl-cd>

<cl-cd data-idx="30"> var total = 5;</cl-cd>

<cl-cd data-idx="31"> Array(total).fill('').forEach( (_, k) => {</cl-cd>

<cl-cd data-idx="32"> var color = `#${Math.random().toString(16).substring(2,8)}`;</cl-cd>

<cl-cd data-idx="33"> dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(5)`).style(`--color: ${color};`);</cl-cd>

<cl-cd data-idx="34"> });</cl-cd>

<cl-cd data-idx="35"> msvg.onclick = () => {</cl-cd>

<cl-cd data-idx="36"> msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);</cl-cd>

<cl-cd data-idx="37"> aud.paused ? (aud.play(), vid.play(), vid1.play()) : (aud.pause(), vid.pause(), vid1.pause());</cl-cd>

<cl-cd data-idx="38"> };</cl-cd>

<cl-cd data-idx="39">};</cl-cd>

<cl-cd data-idx="40"> </cl-cd>

<cl-cd data-idx="41">import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';</cl-cd>

<cl-cd data-idx="42">fscreen.fs('mydiv', 'fsbtn');</cl-cd>

<cl-cd data-idx="43">aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));</cl-cd>

<cl-cd data-idx="44"></script></cl-cd>

</div>

花简静 · 发表于 2024-11-3 14:11

花简静 · 发表于 2024-11-3 14:11

花简静 · 发表于 2024-11-3 14:11

花简静 · 发表于 2024-11-3 14:11

花简静 · 发表于 2024-11-3 14:11

花简静 · 发表于 2024-11-3 14:12

花简静 · 发表于 2024-11-3 14:12

花简静 · 发表于 2024-11-3 14:12