黄色
<style>#papa { margin: 30px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/yellow.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; position: relative; }
#btnplay { position: absolute; width: 80px; height: 80px; left: 10px; top: 10px; border-radius: 50%; background: yellow; box-shadow: inset 8px 5px 50px red; opacity: .8; transition: 6s; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#ipic { position: absolute; top: -150px; left: -170px; width: 400px; height: 400px; filter: opacity(.15); transition: 6s; animation: flash 4s infinite alternate var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { transform: scale(.2) rotate(-30deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1404904408" autoplay loop></audio>
<img id="ipic" src="https://638183.freep.cn/638183/small/sun1.png" alt="" />
<div id="btnplay"></div>
</div>
<script>
(function() {
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}; };
aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
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;`; ipic.style.cssText += `left: ${x - 160}px;`; } else { let xx = e.offsetX || e.layerX; if (xx + sonSize > bodyWidth) xx -= sonSize; btnplay.style.cssText += `left: ${xx}px;`; ipic.style.cssText += `left: ${xx - 160}px;`; } }, 400);
};
})();
</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> 30px 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/1/yellow.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #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">#btnplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 80px; <span class="tBlue">height:</span> 80px; <span class="tBlue">left:</span> 10px; <span class="tBlue">top:</span> 10px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">background:</span> yellow; <span class="tBlue">box-shadow:</span> inset 8px 5px 50px red; <span class="tBlue">opacity:</span> .8; <span class="tBlue">transition:</span> 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">#ipic { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> -150px; <span class="tBlue">left:</span> -170px; <span class="tBlue">width:</span> 400px; <span class="tBlue">height:</span> 400px; <span class="tBlue">filter:</span> opacity(.15); <span class="tBlue">transition:</span> 6s; <span class="tBlue">animation:</span> flash 4s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="6">@keyframes flash { to { <span class="tBlue">transform:</span> scale(.2) rotate(-30deg); } }</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>=1404904408"</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">"ipic"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/sun1.png"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="19"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> 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="22"> <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="23"> <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="24"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="25"> btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="26"> <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="27"> <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;`; ipic.style.cssText += `<span class="tBlue">left:</span> ${x - 160}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;`; ipic.style.cssText += `<span class="tBlue">left:</span> ${xx - 160}px;`; } }, 400);</cl-cd>
<cl-cd data-idx="28">};</cl-cd>
<cl-cd data-idx="29">})();</cl-cd>
<cl-cd data-idx="30"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
喜欢看全屏帖子 太阳光芒照四方。。。。
代码写得太阳跟蛋黄似的。。立体感好强。。
光芒图片缩放旋转也跟视频效果差不多。。
多种手法实现效果。。。小白跟着老师见世面。。{:4_173:} 南无月 发表于 2024-3-11 18:23
多种手法实现效果。。。小白跟着老师见世面。。
{:4_203:} 南无月 发表于 2024-3-11 18:21
太阳光芒照四方。。。。
代码写得太阳跟蛋黄似的。。立体感好强。。
光芒图片缩放旋转也跟视频效果差不多 ...
这也是一种方法吧 起个网名好难 发表于 2024-3-11 12:45
喜欢看全屏帖子
下午好 这厉害了，按钮和按钮下的效果不用图图也不用视频，纯代码打造呢{:4_199:} 这样的背景，这样的效果，真太美了{:4_199:} 全是以颜色为名的帖子呢，看得笑，这是要把各种颜色一网打尽么{:4_173:} 红影 发表于 2024-3-11 19:27
全是以颜色为名的帖子呢，看得笑，这是要把各种颜色一网打尽么
这是曲名，合一起叫霓虹 红影 发表于 2024-3-11 19:25
这样的背景，这样的效果，真太美了
这个序列曲子是一颗狼心向我推荐的 马黑黑 发表于 2024-3-11 19:58
这是曲名，合一起叫霓虹
原来如此。那个是七色吧，还有颜色没弄完呢{:4_173:} 马黑黑 发表于 2024-3-11 20:04
这个序列曲子是一颗狼心向我推荐的
真不错{:4_187:} 红影 发表于 2024-3-11 20:59
真不错
还好的 红影 发表于 2024-3-11 20:59
原来如此。那个是七色吧，还有颜色没弄完呢
最近时间比较紧张，不知道能不能一天弄一个 马黑黑 发表于 2024-3-11 21:48
还好的
还有这样的曲子，正好让黑黑弄各种颜色呢{:4_173:} 马黑黑 发表于 2024-3-11 21:48
最近时间比较紧张，不知道能不能一天弄一个
先忙正事，我最近也是现实里比较忙，一点办法也没有。 马黑黑 发表于 2024-3-11 18:26
这也是一种方法吧
今天的粒子背景光芒又多一种方式。{:4_187:}太灵活了。。。
页:
[1]
2