马黑黑 发表于 2024-3-14 12:25

蓝色

<style>
        #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp/blue.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --y0: -420px; }
        li-zi { position: absolute; top: 50%; width: 2px; height: 100px; background: linear-gradient(to bottom, #2D9DF3, #2D9DF3, transparent); }
        #btnplay { position: absolute; left: 0; top: 10px; width: 80px; height: 80px; background: rgba(20,20,200,.6) url('https://638183.freep.cn/638183/t22/btn/star.png') no-repeat center/cover; border-radius: 50%; border: thick solid; border-color: #B0E0E6 #00BFFF #4682B4 #F0F8FF; transition: 8s; cursor: pointer; animation: rot 6s linear infinite var(--state), bgsize .5s linear infinite alternate var(--state); }
        li-zi::before { position: absolute; content: ''; left: calc(50% - 2px); top: 0; width: 4px; height: 4px; border-radius: 50%; background: lightblue; }
        @keyframes moving { from { opacity: 0; transform: translate(0,0); } to { opacity: 1; transform: translate(0, var(--y0)); } }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes bgsize { to { background-size: 150%; }}
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1447858239" autoplay loop></audio>
        <div id="btnplay"></div>
</div>

<script>
(function() {
        let all = 200;
        for(let i = 0; i < all; i ++) { let lz = document.createElement('li-zi'); let left = Math.random() * 100; lz.style.cssText += ` left: ${left}%; animation: moving ${Math.random() * 10 + 10}s -${Math.random() * 10}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`); papa.style.setProperty('--y0', `-${window.innerHeight / 2 + 100}px`); } }, 400); };
        aud.onpause = aud.onplaying = () => mState();
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-3-14 12:28

<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">&lt;<span class="tDarkRed">style</span>&gt;</cl-cd>
<cl-cd data-idx="2">&nbsp; &nbsp; #papa { <span class="tBlue">margin:</span> 0 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/blue.webp'</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; --y0: -420px; }</cl-cd>
<cl-cd data-idx="3">&nbsp; &nbsp; li-zi { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> 50%; <span class="tBlue">width:</span> 2px; <span class="tBlue">height:</span> 100px; <span class="tBlue">background:</span> linear-gradient(to bottom, #2D9DF3, #2D9DF3, transparent); }</cl-cd>
<cl-cd data-idx="4">&nbsp; &nbsp; #btnplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 0; <span class="tBlue">top:</span> 10px; <span class="tBlue">width:</span> 80px; <span class="tBlue">height:</span> 80px; <span class="tBlue">background:</span> rgba(20,20,200,.6) url(<span class="tMagenta">'https://638183.freep.cn/638183/t22/btn/star.png'</span>) no-repeat center/cover; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">border:</span> thick solid; <span class="tBlue">border-color:</span> #B0E0E6 #00BFFF #4682B4 #F0F8FF; <span class="tBlue">transition:</span> 8s; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state), bgsize .5s linear infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5">&nbsp; &nbsp; li-zi::before { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">left:</span> calc(50% - 2px); <span class="tBlue">top:</span> 0; <span class="tBlue">width:</span> 4px; <span class="tBlue">height:</span> 4px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">background:</span> lightblue; }</cl-cd>
<cl-cd data-idx="6">&nbsp; &nbsp; @keyframes moving { from { <span class="tBlue">opacity:</span> 0; <span class="tBlue">transform:</span> translate(0,0); } to { <span class="tBlue">opacity:</span> 1; <span class="tBlue">transform:</span> translate(0, <span class="tBlue">var</span>(--y0)); } }</cl-cd>
<cl-cd data-idx="7">&nbsp; &nbsp; @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="8">&nbsp; &nbsp; @keyframes bgsize { to { <span class="tBlue">background-size:</span> 150%; }}</cl-cd>
<cl-cd data-idx="9">&lt;<span class="tDarkRed">/style</span>&gt;</cl-cd>
<cl-cd data-idx="10">&nbsp;</cl-cd>
<cl-cd data-idx="11">&lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>&gt;</cl-cd>
<cl-cd data-idx="12">&nbsp; &nbsp; &lt;<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>=1447858239"</span> autoplay loop&gt;&lt;<span class="tDarkRed">/audio</span>&gt;</cl-cd>
<cl-cd data-idx="13">&nbsp; &nbsp; &lt;<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>&gt;&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
<cl-cd data-idx="14">&lt;<span class="tDarkRed">/div</span>&gt;</cl-cd>
<cl-cd data-idx="15">&nbsp;</cl-cd>
<cl-cd data-idx="16">&lt;<span class="tDarkRed">script</span>&gt;</cl-cd>
<cl-cd data-idx="17">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="18">&nbsp; &nbsp; <span class="tBlue">let</span> all = 200;</cl-cd>
<cl-cd data-idx="19">&nbsp; &nbsp; <span class="tBlue">for</span>(<span class="tBlue">let</span> i = 0; i &lt; 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> left = <span class="tRed">Math</span>.random() * 100; lz.style.cssText += ` <span class="tBlue">left:</span> ${left}%; <span class="tBlue">animation:</span> moving ${<span class="tRed">Math</span>.random() * 10 + 10}s -${<span class="tRed">Math</span>.random() * 10}s infinite <span class="tBlue">var</span>(--state); `; papa.prepend(lz); }</cl-cd>
<cl-cd data-idx="20">&nbsp; &nbsp; <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="21">&nbsp; &nbsp; sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="22">&nbsp; &nbsp; sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="23">&nbsp; &nbsp; <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="24">&nbsp; &nbsp; sF.onload = () =&gt; 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="25">&nbsp; &nbsp; <span class="tBlue">let</span> mState = () =&gt; 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="26">&nbsp; &nbsp; <span class="tBlue">let</span> getOffsetPos = (ele) =&gt; { <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="27">&nbsp; &nbsp; <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="28">&nbsp; &nbsp; <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 &lt; paOffset) x = paOffset; x = x - paOffset; <span class="tBlue">if</span> (x + sonSize &gt;= 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 &gt; bodyWidth) xx -= sonSize; btnplay.style.cssText += `<span class="tBlue">left:</span> ${xx}px;`; papa.style.setProperty(<span class="tMagenta">'--left'</span>, `${xx + 40}px`); papa.style.setProperty(<span class="tMagenta">'--y0'</span>, `-${<span class="tRed">window</span>.innerHeight / 2 + 100}px`); } }, 400); };</cl-cd>
<cl-cd data-idx="29">&nbsp; &nbsp; aud.onpause = aud.onplaying = () =&gt; mState();</cl-cd>
<cl-cd data-idx="30">&nbsp; &nbsp; btnplay.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="31">})();</cl-cd>
<cl-cd data-idx="32">&lt;<span class="tDarkRed">/script</span>&gt;</cl-cd>
<cl-cd data-idx="33">&nbsp;</cl-cd>
</div>

南无月 发表于 2024-3-14 12:38

这么壮观的场景，以为还是视频的效果。。。。原来根本没有视频。。。

向上飞的粒子是代码完成的。。。。
粒子色彩配得跟背景图太搭了，效果堪比视频，更加震憾。。。{:4_199:}

南无月 发表于 2024-3-14 12:41

一张PNG背景图片缩放在色环里闪烁成小播。这个创意也是绝啦。。{:4_173:}
选图一流，手法一流，效果一流。。。

红影 发表于 2024-3-14 13:02

哈哈，还是有蓝了，意外惊喜，还以为剩下的两个颜色真的不弄了{:4_173:}

红影 发表于 2024-3-14 13:19

这个背景简直是为粒子量身定做的一样，太漂亮了。小星星的制作也很绝妙。
这个帖子太美了{:4_199:}

红影 发表于 2024-3-14 13:20

这个全屏后没有播放器放大的设置呢{:4_173:}

马黑黑 发表于 2024-3-14 13:21

红影 发表于 2024-3-14 13:20
这个全屏后没有播放器放大的设置呢

它挺合适，就没设置了

马黑黑 发表于 2024-3-14 13:21

南无月 发表于 2024-3-14 12:38
这么壮观的场景，以为还是视频的效果。。。。原来根本没有视频。。。

向上飞的粒子是代码完成的。。。。 ...

感谢点评

马黑黑 发表于 2024-3-14 13:22

红影 发表于 2024-3-14 13:02
哈哈，还是有蓝了，意外惊喜，还以为剩下的两个颜色真的不弄了

{:4_170:}

马黑黑 发表于 2024-3-14 13:22

南无月 发表于 2024-3-14 12:41
一张PNG背景图片缩放在色环里闪烁成小播。这个创意也是绝啦。。
选图一流，手法一流，效果一流。 ...

合起来是三流{:4_170:}

马黑黑 发表于 2024-3-14 13:23

红影 发表于 2024-3-14 13:19
这个背景简直是为粒子量身定做的一样，太漂亮了。小星星的制作也很绝妙。
这个帖子太美了

谢美

南无月 发表于 2024-3-14 14:14

马黑黑 发表于 2024-3-14 13:22
合起来是三流

天下大势，闲着没事不要乱合。。。{:4_170:}
三还生万物呢，顶级水平。。

南无月 发表于 2024-3-14 14:15

马黑黑 发表于 2024-3-14 13:21
感谢点评
来点实在的，咖啡整一杯呗{:4_190:}{:4_170:}别这么小气。。

小辣椒 发表于 2024-3-14 16:51

我手机看见按钮在转其中有一段一段的颜色，黑黑这个是代码设置的颜色，不是进度条吧？

小辣椒 发表于 2024-3-14 16:53

感觉黑黑现在做的赤橙黄绿青蓝紫，七色效果是适合做音画背景特效。非常漂亮

朵拉 发表于 2024-3-14 19:11

有些些震撼到了~~{:4_178:}

红影 发表于 2024-3-14 21:11

马黑黑 发表于 2024-3-14 13:21
它挺合适，就没设置了

嗯嗯，这个也是要看情况的。

红影 发表于 2024-3-14 21:12

马黑黑 发表于 2024-3-14 13:22


看到这个，真的太开心了，真的以为后面两个颜色就没了呢{:4_205:}

红影 发表于 2024-3-14 21:13

马黑黑 发表于 2024-3-14 13:23
谢美

黑黑的构思非常奇妙，厉害{:4_199:}
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 蓝色