未闻花名

马黑黑 · 发表于 2023-4-15 21:10

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-4-15 21:13 编辑

马黑黑 · 发表于 2023-4-15 21:11

帖子代码

<style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: green url('https://638183.freep.cn/638183/t23/webp1/138.webp') center/cover no-repeat;overflow: hidden;filter: contrast(1.2);perspective: 1000px;position: relative;--state: paused; --sy: 6deg; --sz: 100deg;}
#mplayer {position: absolute;width: 300px;height: 300px;right: 30px;bottom: 0;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
</style>
<div id="papa">
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1964109091" autoplay loop></audio>
<script>
Array.from({length: 64}).forEach( (item,key) => {
let sp = document.createElement('span');
sp.className = 'line';
sp.style.cssText += `
--sy: ${Math.random() * 720 - 360}deg;
--sz: ${Math.random() * 720 - 360}deg;
background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
transform: rotateY(var(--sy)) rotateZ(var(--sz));
animation: rot 30s linear infinite var(--state);
`;
mplayer.appendChild(sp);
});
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

复制代码

马黑黑 · 发表于 2023-4-15 21:11

马黑黑 · 发表于 2023-4-15 21:12

css-doodle版代码

<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"></script>
<style>
#papa {margin: 30px auto;width: 1024px;height: 640px;background: green url('https://638183.freep.cn/638183/t23/webp1/138.webp') center/cover no-repeat;filter: contrast(1.2);position: relative;}
</style>
<div id="papa">
<css-doodle>
:doodle {
@grid: 8 / 300px;
@shape: circle;
perspective: 200px;
cursor: pointer;
position: absolute;
right: 180px;
bottom: 0;
z-index: 10;
--state: running;
}
@size: 1px 100%;
@place-cell: center;
background: rgba(@rn(50), @rn(255), @rn(50), .8);
--sy: @rand(-360deg, 360deg);
--sz: @rand(-360deg, 360deg);
transform: rotateY(var(--sy)) rotateZ(var(--sz));
animation: rot 30s linear infinite var(--state);
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1964109091" autoplay loop></audio>
</div>
<script>
let doo = document.querySelector('css-doodle');
let mState = () => doo.style.setProperty('--state', aud.paused ? 'paused' : 'running');
doo.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>