论坛 › 欢乐水吧 › 天地孤远任我行

马黑黑 发表于 2022-11-8 12:54

天地孤远任我行

<style>
#papa {
        margin: 120px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 629px;
        background: gray url('https://638183.freep.cn/638183/t22/webp/tdgy.webp') no-repeat center/cover;
        display: grid;
        place-items: center;
        box-shadow: 3px 3px 20px #000;
        perspective: 1000px;
        overflow: hidden;
        user-select: none;
        position: relative;
        z-index: 1;
}
#mplayer {
        position: absolute;
        bottom: 20px;
        grid-template-columns: auto auto auto;
        gap: 6px;
        display: grid;
        place-items: center;
        color: hsl(0, 100%, 100%);
        font: normal 16px sans-serif;
        z-index: 999;
}
#btnplay {
        --state: paused;
        margin-right: -4px;
        width: 30px;
        height: 30px;
        font: bold 30px/30px serif;
        text-align: center;
        cursor: pointer;
        animation: rot 4s infinite linear;
        animation-play-state: var(--state);
}
#prog {
        width: 200px;
        height: 20px;
        opacity: .95;
        cursor: pointer;
}
.stars {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: silver;
        transform-style: preserve-3d;
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <div id="mplayer">
                <span id="btnplay">✿</span>
                <meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
                <span id="tmsg">00:00 | 00:00</span>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=393697.mp3" loop autoplay></audio>

<script>
(function() {
        (function() {
                for(j=0; j<500; j++) {
                        let ele = document.createElement('span');
                        ele.className = 'stars';
                        ele.style.cssText += `
                                left: ${Math.random() * 400 + 450}px;
                                top: ${Math.random() * 80 + 100}px;
                                background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
                                box-shadow: 0 0 5px hsla(0,10%,100%,.25);
                                transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
                                animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
                        `;
                        papa.appendChild(ele);
                }
        })();
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
        prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        }
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => aud.play());
        aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
        });
        let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
        };
})();
</script>

小辣椒 发表于 2022-11-8 12:59

我怕插队，等了一下再回帖{:4_173:}

小辣椒 发表于 2022-11-8 13:02

这个粒子效果和前面那种不一样了，会集中后再散开{:4_199:}

马黑黑 发表于 2022-11-8 13:08

小辣椒 发表于 2022-11-8 13:02
这个粒子效果和前面那种不一样了，会集中后再散开

就在animation里加一个 alternate，表示往复运行。CSS很奇妙的。

小辣椒 发表于 2022-11-8 13:10

马黑黑 发表于 2022-11-8 13:08
就在animation里加一个 alternate，表示往复运行。CSS很奇妙的。

这个集中再闪开是按外框图的样子吧？不能按自己设置尺寸大小？比如我想圆的。。。

马黑黑 发表于 2022-11-8 13:40

小辣椒 发表于 2022-11-8 13:10
这个集中再闪开是按外框图的样子吧？不能按自己设置尺寸大小？比如我想圆的。。。

最简单的方法是把粒子加给一个圆形的元素，比如加给 #mama 而不是 #papa:

#mama {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%; /*圆形*/
        overflow: hidden; /*防止溢出*/
}

然后，for语句添加粒子添加给 #mama:

        (function() {
                for(j=0; j<500; j++) {
                        let ele = document.createElement('span');
                        ele.className = 'stars';
                        ele.style.cssText += `
                                left: ${Math.random() * 400 + 450}px;
                                top: ${Math.random() * 80 + 100}px;
                                background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
                                box-shadow: 0 0 5px hsla(0,10%,100%,.25);
                                transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
                                animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
                        `;
                        mama.appendChild(ele);
                }
        })();

当然，粒子的left和top值必须做相应修改，比方说left，原来的是这样：

left: ${Math.random() * 400 + 450}px;

显然超出了 mama 元素的尺寸，可以改为：

left: ${Math.random() * 100 + 150}px;

这样可以保证left的随机值在 150px 到 250px 之间。top值也做类似处理。还有，translate3d()函数里的参数尤其是头两个也要做相应修改，以使子元素的运动尽可能最大限度是在 400*400 的区域里（但运动中总会有溢出，溢出部分前面的#mama选择器已经不现实它们了）。

加林森 发表于 2022-11-8 13:58

我回来了。得慢慢学习了。

红影 发表于 2022-11-8 16:16

漂亮的珠珠像一群鸟儿，徜徉在天地间，真美{:4_199:}

梦油 发表于 2022-11-8 16:33

五彩缤纷、绚丽多姿，太美了。

相约爱晚亭 发表于 2022-11-8 16:39

欣赏音画佳作！

马黑黑 发表于 2022-11-8 17:51

加林森 发表于 2022-11-8 13:58
我回来了。得慢慢学习了。

队长回来就好阿，注意调整身体

马黑黑 发表于 2022-11-8 17:52

相约爱晚亭 发表于 2022-11-8 16:39
欣赏音画佳作！

感谢

千羽 发表于 2022-11-8 18:55

彩色的小圆点飞舞在空寂中，既有趣又漂亮{:4_187:}

千羽 发表于 2022-11-8 18:56

这个播放器也是美美哒{:4_187:}

马黑黑 发表于 2022-11-8 19:01

千羽 发表于 2022-11-8 18:56
这个播放器也是美美哒

雪花按钮，挺好的

马黑黑 发表于 2022-11-8 19:02

红影 发表于 2022-11-8 16:16
漂亮的珠珠像一群鸟儿，徜徉在天地间，真美

天地孤远的镜像需要一些动态点缀

马黑黑 发表于 2022-11-8 19:02

千羽 发表于 2022-11-8 18:55
彩色的小圆点飞舞在空寂中，既有趣又漂亮

有点意思的吧

马黑黑 发表于 2022-11-8 19:03

梦油 发表于 2022-11-8 16:33
五彩缤纷、绚丽多姿，太美了。

感谢支持

千羽 发表于 2022-11-8 19:03

马黑黑 发表于 2022-11-8 19:02
有点意思的吧

嗯，挺好{:4_181:}

马黑黑 发表于 2022-11-8 19:04

千羽 发表于 2022-11-8 19:03
嗯，挺好

那就好

查看完整版本: 天地孤远任我行