|
<style>
#pa {
margin: 20px 0;
position: relative;
display: grid;
place-items: center;
left: calc(50% - var(--offsetX));
transform: translateX(-50%);
width: clamp(800px, 100vw, 1440px);
height: clamp(450px, 56.25vw, 810px);
box-sizing: border-box;
background: #ccc url('https://638183.freep.cn/638183/t24/w5/field.webp') no-repeat center/cover;
box-shadow: 4px 6px 8px rgba(0,0,0,.6);
--state: running;
--offsetX: 81px;
}
#ma {
position: absolute;
width: 15vw;
height: 15vw;
background: tan url('https://638183.freep.cn/638183/small/envelop.jpg') no-repeat center/cover;
border-radius: 50%;
opacity: 0.7;
box-shadow: 0 0 16px rgba(0,0,0,.35);
transition: 1s;
cursor: pointer;
animation: rot 10s linear infinite var(--state);
}
#ma:hover { filter: invert(1); }
#msvg { position: absolute; pointer-events: none; }
#msvg rect { animation: move 18s var(--delay) linear infinite alternate var(--state), fade 1s var(--delay) linear infinite alternate var(--state); }
#btnFs { bottom: 20px; color: snow; }
@keyframes rot {
to { transform: rotate(360deg); }
}
@keyframes move {
to { x : 0; y: 0; }
}
@keyframes fade {
to { opacity: 0; }
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=848470" autoplay loop></audio>
<div id="ma"></div>
<svg id="msvg" width="100%" height="100%" viewBox="-80 -45 160 90"></svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var lzCount = 60;
Array.from({length: lzCount}).forEach((_,idx) => {
var x = Math.random() * 80 * (Math.random() > 0.5 ? 1 : -1),
y = Math.random() * 45 * (Math.random() > 0.5 ? 1 : -1),
s = Math.random() + 1,
d = Math.random() * -18,
c = '#' + Math.random().toString(16).substring(2,8);
dr.rect(x,y,s,s,c,'none',0,'50%','50%').style(`--delay: ${d}s`);
});
FS(pa, ma);
</script>
| 
发表于 2025-8-28 12:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-8-28 16:14
发表于 2025-8-28 16:27
