绿色
<style>#papa { margin: 20px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp/green.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; --left: 50px; }
#btnplay { position: absolute; top: 10px; left: 0; width: 100px; transition: left 6s; cursor: pointer; animation: rot 8s linear infinite var(--state); }
li-zi { position: absolute; left: var(--left); top: 55px; width: 2px; height: 2px; background: lightgreen; box-shadow: 0 -4px 6px green; transition: left 6s; }
@keyframes moving { to { transform: translate(var(--x0),var(--y0)); opacity: 0; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440425602" autoplay loop></audio>
<img id="btnplay" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" alt="" title="点击播放" />
</div>
<script>
(function() {
let all = 300;
for(let i = 0; i < all; i++) { let lz = document.createElement('li-zi'); let hudu = Math.PI / 180 * 360 / all * i; let xx = 200 * Math.cos(hudu), yy = 200 * Math.sin(hudu); lz.style.cssText += ` --x0: ${xx}px; --y0: ${yy}px; animation: moving ${Math.random() + .5}s linear -${Math.random()}s infinite var(--state); `; papa.prepend(lz); }
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: #eee; bottom: 10px; left: 48%;'});
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),btnplay.title = '点击播放') : (papa.style.setProperty('--state','running'),btnplay.title = '点击暂停');
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}; };
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`; papa.style.setProperty('--left', `${x + 40}px`); } else { let xx = e.offsetX || e.layerX; if (xx + sonSize > bodyWidth) xx -= sonSize; btnplay.style.cssText += `left: ${xx}px;`; papa.style.setProperty('--left', `${xx + 40}px`); } }, 400); };
aud.onpause = aud.onplaying = () => mState();
btnplay.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> 20px 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/green.webp'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; <span class="tBlue">--left:</span> 50px; }</cl-cd>
<cl-cd data-idx="3">#btnplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> 10px; <span class="tBlue">left:</span> 0; <span class="tBlue">width:</span> 100px; <span class="tBlue">transition:</span> left 6s; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 8s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4">li-zi { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> <span class="tBlue">var</span>(--left); <span class="tBlue">top:</span> 55px; <span class="tBlue">width:</span> 2px; <span class="tBlue">height:</span> 2px; <span class="tBlue">background:</span> lightgreen; <span class="tBlue">box-shadow:</span> 0 -4px 6px green; <span class="tBlue">transition:</span> left 6s; }</cl-cd>
<cl-cd data-idx="5">@keyframes moving { to { <span class="tBlue">transform:</span> translate(<span class="tBlue">var</span>(--x0),<span class="tBlue">var</span>(--y0)); <span class="tBlue">opacity:</span> 0; } }</cl-cd>
<cl-cd data-idx="6">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<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>=1440425602"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/web/svg/flower_3.svg"</span> alt=<span class="tMagenta">""</span> title=<span class="tMagenta">"点击播放"</span> /></cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="15">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">let</span> all = 300;</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">for</span>(<span class="tBlue">let</span> i = 0; i < all; i++) { <span class="tBlue">let</span> lz = <span class="tRed">document</span>.createElement(<span class="tMagenta">'li-zi'</span>); <span class="tBlue">let</span> hudu = <span class="tRed">Math</span>.PI / 180 * 360 / all * i; <span class="tBlue">let</span> xx = 200 * <span class="tRed">Math</span>.cos(hudu), yy = 200 * <span class="tRed">Math</span>.sin(hudu); lz.style.cssText += ` --x0: ${xx}px; --y0: ${yy}px; <span class="tBlue">animation:</span> moving ${<span class="tRed">Math</span>.random() + .5}s linear -${<span class="tRed">Math</span>.random()}s infinite <span class="tBlue">var</span>(--state); `; papa.prepend(lz); }</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="19"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="20"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="21"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="22"> 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> #eee; <span class="tBlue">bottom:</span> 10px; <span class="tBlue">left:</span> 48%;'</span>});</cl-cd>
<cl-cd data-idx="23"> <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>) : (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'running'</span>),btnplay.title = <span class="tMagenta">'点击暂停'</span>);</cl-cd>
<cl-cd data-idx="24"> <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="25"> <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="26"> <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`; papa.style.setProperty(<span class="tMagenta">'--left'</span>, `${x + 40}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}px;`; papa.style.setProperty(<span class="tMagenta">'--left'</span>, `${xx + 40}px`); } }, 400); };</cl-cd>
<cl-cd data-idx="27"> aud.onpause = aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="28"> btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="29">})();</cl-cd>
<cl-cd data-idx="30"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
漂亮{:4_199:} 感谢老师分享佳作{:4_187:} 世外桃源 发表于 2024-3-12 12:16
感谢老师分享佳作
7个色彩的简单帖子，基本一个模式，还没做完 漫山遍野的绿色绿色是一种让人心情愉悦的颜色，它让我们充满着朝气与活力，迎接美好的未来。《绿色》作品制作精美、寓意深刻。 梦油 发表于 2024-3-12 16:44
漫山遍野的绿色绿色是一种让人心情愉悦的颜色，它让我们充满着朝气与活力，迎接美好的未来。《绿色》作品制 ...
{:4_191:} 看老师继续推进色彩音画贴。。。看图赏乐学代码，真是不错的体验。。{:4_173:} 粒子做的光芒还加了绿色发光效果。。移到右边效果更明显。。。{:4_204:}
又是一种新的手法。。。 南无月 发表于 2024-3-12 18:01
看老师继续推进色彩音画贴。。。看图赏乐学代码，真是不错的体验。。
{:4_191:} 南无月 发表于 2024-3-12 18:02
粒子做的光芒还加了绿色发光效果。。移到右边效果更明显。。。
又是一种新的手法。。。
{:4_176:} 马黑黑 发表于 2024-3-12 18:25
{:4_173:}这杯是红的 马黑黑 发表于 2024-3-12 18:25
这杯是白的。。 马黑黑 发表于 2024-3-12 18:25
深水炸弹的节奏么。{:4_170:} 南无月 发表于 2024-3-12 19:15
深水炸弹的节奏么。
木有木有，这里一切安全 南无月 发表于 2024-3-12 19:14
这杯是白的。。
白酒好喝 南无月 发表于 2024-3-12 19:14
这杯是红的
养颜的说 这光的颜色还会变呢 绿叶清舟 发表于 2024-3-12 19:46
这光的颜色还会变呢
我不太清楚。一般来说，光的颜色是不会变的，我们觉得它在变化，是因为肉眼凡胎无法识别全部的光以及光的强弱 马黑黑 发表于 2024-3-12 19:47
我不太清楚。一般来说，光的颜色是不会变的，我们觉得它在变化，是因为肉眼凡胎无法识别全部的光以及光的 ...
在左边和右边的颜色不一样的了