论坛 › 动画音画 › 宇宙深处

马黑黑 发表于 2023-3-3 12:29

宇宙深处

<style>
#papa {
        --state: paused;
        --s1: 0.8; --s2: 1.6;
        margin: -80px 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/webp/yvui.webp') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#papa::before {
        position: absolute;
        content: '';
        width: 200px;
        height: 200px;
        background: transparent;
        box-shadow: var(--boxsd);
        border-radius: 50%;
}
#papa:fullscreen { --s1: 1; --s2: 2; }
#papa:fullscreen .ball { width: 20px; height: 20px; }
#mplayer {
        position: absolute;
        width: 140px;
        height: 140px;
        display: grid;
        place-items: center;
        cursor: pointer;
        animation: change 18s linear infinite alternate var(--state);
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        box-shadow: -5px 0 10px hsla(0,0%,0%,.42) inset;
}
#btnFs {
        position: absolute;
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid snow;
        color: snow;
        text-shadow: 1px 1px 1px #000;
        display: none;
        cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 100px 60px hsla(240, 100%,50%, .2), -2px -2px 8px snow inset; } }
@keyframes change {
        from { transform: perspective(3000px) translateZ(-360px) rotateX(-15deg) rotateY(-30deg) rotateZ(0) scale(var(--s1)); }
        to { transform: perspective(3000px) translateZ(360px) rotateX(15deg) rotateY(30deg) rotateZ(3turn) scale(var(--s2)); }
}
</style>

<div id="papa">
        <div id="mplayer"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893368015.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let total = 18, fs = false, timerId, boxTimer;
        for(let i = 0; i < total; i ++) {
                let ball = document.createElement('span');
                ball.className = 'ball';
                ball.style.cssText += `
                        background: #${Math.random().toString(16).substr(-6)};
                        transform: rotate(${360/total*i}deg) translate(70px);
                        animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
                `;
                mplayer.appendChild(ball);
        }

        let flash = () => {
                clearTimeout(boxTimer);
                papa.style.setProperty('--boxsd', `
                        ${Math.random()*100 - 500}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 - 350}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 + 250}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 + 400}px 0 60px #${Math.random().toString(16).substr(-6)}`);
                boxTimer = setTimeout(flash,120);
        };

        let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), clearTimeout(boxTimer)) : (papa.style.setProperty('--state','running'), flash());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

马黑黑 发表于 2023-3-3 12:30

帖子代码
<style>
#papa {
        --state: paused;
        --s1: 0.8; --s2: 1.6;
        margin: -80px 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/webp/yvui.webp') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#papa::before {
        position: absolute;
        content: '';
        width: 200px;
        height: 200px;
        background: transparent;
        box-shadow: var(--boxsd);
        border-radius: 50%;
}
#papa:fullscreen { --s1: 1; --s2: 2; }
#papa:fullscreen .ball { width: 20px; height: 20px; }
#mplayer {
        position: absolute;
        width: 140px;
        height: 140px;
        display: grid;
        place-items: center;
        cursor: pointer;
        animation: change 18s linear infinite alternate var(--state);
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        box-shadow: -5px 0 10px hsla(0,0%,0%,.42) inset;
}
#btnFs {
        position: absolute;
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid snow;
        color: snow;
        text-shadow: 1px 1px 1px #000;
        display: none;
        cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 100px 60px hsla(240, 100%,50%, .2), -2px -2px 8px snow inset; } }
@keyframes change {
        from { transform: perspective(3000px) translateZ(-360px) rotateX(-15deg) rotateY(-30deg) rotateZ(0) scale(var(--s1)); }
        to { transform: perspective(3000px) translateZ(360px) rotateX(15deg) rotateY(30deg) rotateZ(3turn) scale(var(--s2)); }
}
</style>

<div id="papa">
        <div id="mplayer"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893368015.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let total = 18, fs = false, timerId, boxTimer;
        for(let i = 0; i < total; i ++) {
                let ball = document.createElement('span');
                ball.className = 'ball';
                ball.style.cssText += `
                        background: #${Math.random().toString(16).substr(-6)};
                        transform: rotate(${360/total*i}deg) translate(70px);
                        animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
                `;
                mplayer.appendChild(ball);
        }

        let flash = () => {
                clearTimeout(boxTimer);
                papa.style.setProperty('--boxsd', `
                        ${Math.random()*100 - 500}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 - 350}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 + 250}px 0 60px #${Math.random().toString(16).substr(-6)},
                        ${Math.random()*100 + 400}px 0 60px #${Math.random().toString(16).substr(-6)}`);
                boxTimer = setTimeout(flash,120);
        };

        let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), clearTimeout(boxTimer)) : (papa.style.setProperty('--state','running'), flash());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

马黑黑 发表于 2023-3-3 12:39

本帖最后由 马黑黑 于 2023-3-3 12:41 编辑

帖子左右的闪动效果用伪元素 #papa::before 的阴影制作，共四个阴影。

首先，#papa::before 设置为200*200、圆形、透明背景，并通过主元素的grid布局设定将其绝对居中；

其次，四个阴影由JS生成，阴影不要与伪元素有交集，否则 即使是透明背景也会出现背景（如果需要背景的话也可以，甚至设置背景色为非透明色）。阴影变幻有位置和颜色的随机变化；

最后，通过定时器 setTimeout 反复调用 flash 函数以驱动阴影的变幻。阴影变幻驱动受到 mState 函数的控制，它能响应音乐的暂停与播放动作。

小辣椒 发表于 2023-3-3 13:08

马黑黑 发表于 2023-3-3 12:39
帖子左右的闪动效果用伪元素 #papa::before 的阴影制作，共四个阴影。

首先，#papa::before 设置为200*2 ...

黑黑增加这了这个效果可以控制了{:4_187:}

阴影变幻驱动受到 mState 函数的控制，它能响应音乐的暂停与播放动作。

小辣椒 发表于 2023-3-3 13:08

挖~~有钱

小辣椒 发表于 2023-3-3 13:08

小辣椒见钱眼开{:4_170:}

小辣椒 发表于 2023-3-3 13:10

看见效果了点击小圆 4个阴影就停止了，有联动控制效果{:4_199:}

小辣椒 发表于 2023-3-3 13:11

感谢黑黑新教程不断。。。。小辣椒已经跟不上了

小辣椒 发表于 2023-3-3 13:12

谢谢黑黑分享，小辣椒只是套用玩玩，那些想学习这种制作的朋友可以用自己的代码里面了

红影 发表于 2023-3-3 16:01

这个很巧妙，因为珠珠阴影的影响，看起来宇宙中心的那处亮点也在闪，很奇妙的效果{:4_187:}

樵歌 发表于 2023-3-3 16:02

神通广大，法力无边！竟然把黑洞给镇住了！{:4_189:}

红影 发表于 2023-3-3 16:03

“阴影变幻驱动受到 mState 函数的控制，它能响应音乐的暂停与播放动作。”
黑黑想让什么跟音乐响应都是这么简单的呢，我是弄一次确实那么麻烦，真的是没法比啊{:4_173:}

红影 发表于 2023-3-3 16:04

四个光团和那珠链的色彩都好美啊{:4_187:}

焱鑫磊 发表于 2023-3-3 17:14

欣赏学习老师佳作！

马黑黑 发表于 2023-3-3 17:30

焱鑫磊 发表于 2023-3-3 17:14
欣赏学习老师佳作！

感谢支持

马黑黑 发表于 2023-3-3 17:31

小辣椒 发表于 2023-3-3 13:08
黑黑增加这了这个效果可以控制了

阴影变幻驱动受到 mState 函数的控制，它能响应音乐的暂停 ...

喝水{:4_190:}

马黑黑 发表于 2023-3-3 17:31

小辣椒 发表于 2023-3-3 13:08
挖~~有钱

眼睛睁开了木有{:5_106:}

马黑黑 发表于 2023-3-3 17:32

小辣椒 发表于 2023-3-3 13:08
小辣椒见钱眼开

果然{:5_117:}

马黑黑 发表于 2023-3-3 17:32

小辣椒 发表于 2023-3-3 13:12
谢谢黑黑分享，小辣椒只是套用玩玩，那些想学习这种制作的朋友可以用自己的代码里面了

你也可以努力一把

马黑黑 发表于 2023-3-3 17:32

小辣椒 发表于 2023-3-3 13:11
感谢黑黑新教程不断。。。。小辣椒已经跟不上了

慢慢跟不急

查看完整版本: 宇宙深处