论坛 › 音乐沙龙 › 仰望

马黑黑 发表于 2023-3-1 07:43

仰望

<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/iyyb.webp') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#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 10s 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 30px hsla(200, 100%,50%, .35), -2px -2px 8px snow inset; } }
@keyframes change { from { transform: rotate(0) scale(var(--s1)); } to { transform: rotate(1turn) 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=1858415053.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let total = 18, fs = false, timerId;
        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 mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        aud.addEventListener('error', () => {
                if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/03/01/c6bc152cd2954d79cff5da3a7adba48d.mp3';
        });       
        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-1 07:43

帖子代码
<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/iyyb.webp') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#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 10s 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 30px hsla(200, 100%,50%, .35), -2px -2px 8px snow inset; } }
@keyframes change { from { transform: rotate(0) scale(var(--s1)); } to { transform: rotate(1turn) 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=1858415053.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let total = 18, fs = false, timerId;
        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 mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        aud.addEventListener('error', () => {
                if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/03/01/c6bc152cd2954d79cff5da3a7adba48d.mp3';
        });       
        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-1 07:52

本帖特点：全屏模式下，珠链会相应变大。

实现方法：

利用伪类 :fullscreen 设置进入全屏后关键帧动画 change（源码48行）所需CSS变量 --s1 和 --s2 从窗口模式的 0.8 - 1.6（源码04行）变为 1 - 2（源码16行）；同时，令珠子的宽高尺寸从原来的 15*15（源码29、30行）变为 20*20（源码17行）。

马黑黑 发表于 2023-3-1 07:54

变幻珠链比较朴素的版本链接：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=66935&page=1#pid1848743

红影 发表于 2023-3-1 10:04

黑黑把那珠链又加了很多改进，加入了彩色，还令它能旋转和变大，并且全屏时也能随之变化。
这个珠链在帖子里真漂亮{:4_187:}

起个网名好难 发表于 2023-3-1 10:25

欣赏佳作

醉美水芙蓉 发表于 2023-3-1 11:53

醉美水芙蓉 发表于 2023-3-1 11:53

醉美水芙蓉 发表于 2023-3-1 11:54

马黑黑 发表于 2023-3-1 12:07

红影 发表于 2023-3-1 10:04
黑黑把那珠链又加了很多改进，加入了彩色，还令它能旋转和变大，并且全屏时也能随之变化。
这个珠链在帖子 ...

珠链过去使用过，这里有不同的处理

马黑黑 发表于 2023-3-1 12:07

起个网名好难 发表于 2023-3-1 10:25
欣赏佳作

感谢支持

马黑黑 发表于 2023-3-1 12:07

醉美水芙蓉 发表于 2023-3-1 11:53
好漂亮的手链！

比较喜欢做手链{:5_117:}

马黑黑 发表于 2023-3-1 12:08

醉美水芙蓉 发表于 2023-3-1 11:53
不仅闪闪发光，还会放大缩小！

这效果还不错吧

马黑黑 发表于 2023-3-1 12:08

醉美水芙蓉 发表于 2023-3-1 11:54
哇！还会左右旋转！黑黑老师太厉害了！

顺时针逆时针旋转只需 animation 属性里加入 alternate 便可

庶民 发表于 2023-3-1 14:11

生活在我们身边，美好在我们眼前。

樵歌 发表于 2023-3-1 16:12

仰望星空的菇凉，可别减肥过度哟{:4_189:}

马黑黑 发表于 2023-3-1 18:23

樵歌 发表于 2023-3-1 16:12
仰望星空的菇凉，可别减肥过度哟

嗯，太牙签了

红影 发表于 2023-3-1 18:35

马黑黑 发表于 2023-3-1 12:07
珠链过去使用过，这里有不同的处理

是啊，还有个专门的封装呢{:4_187:}

马黑黑 发表于 2023-3-1 19:06

红影 发表于 2023-3-1 18:35
是啊，还有个专门的封装呢

珠链很漂亮的

千羽 发表于 2023-3-1 21:03

本帖最后由 千羽 于 2023-3-1 21:05 编辑

这图色调挺通透，播放器太美了{:4_187:}

查看完整版本: 仰望