醉美水芙蓉 发表于 2023-8-19 12:26

追忆美

本帖最后由 醉美水芙蓉 于 2023-8-19 20:21 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 621px); width: 1080px; height: 608px; background: url('https://pic.imgdb.cn/item/64e04391661c6c8e543a9bfd.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
.clover { position: absolute; top: -200px; width: 100px; height: 100px; outline: 0; border: 0; background: green; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(1200px) rotate(2turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music290801764.mp3" autoplay></audio>

<script>

(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xypinpu_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        ypData = ;
        script.onload = () => {
                HCPlayer({
                                papa: '#papa',
                                lrcAr: geci,
                                ypData: ypData,
                                lrc_css:'',
                                player_css: '--ww: 100%; --hh: 160px; --color1: snow; --color2: green; bottom: 0;',
                                pinpu: {size: 8, gap: 2}, /* 频谱条宽度与彼此间间隔 */
                });
        };
        let mkClover = (ele,num) => {
                let r = ele.offsetWidth / 2, pathAr = [];
                for(let i = 0; i < 60; i ++) {
                        let angle = i * 2 * Math.PI /60;
                        let x = r - r * Math.sin(num * angle) * Math.cos(angle);
                        let y = r - r * Math.sin(num * angle) * Math.sin(angle);
                        pathAr.push(x + 'px ' + y + 'px');
                }
                return 'polygon(' + pathAr.join(', ') + ')';
        }
        Array.from({length: 36}).forEach((item) => {
                let ww = 30 + Math.floor(Math.random() * 30);
                let ar = ;
                item = document.createElement('span');
                item.className = 'clover';
                item.style.cssText += `
                        --deg: ${80 - Math.random() * 240}deg;
                        --delay: ${Math.random() * 10 - 20}s;
                        width: ${ww}px;
                        height: ${ww}px;
                        left: ${30 + Math.random() * 20}%;
                `;
                papa.appendChild(item);
                item.style.clipPath = mkClover(item, ar);
        });
})();

</script>

红影 发表于 2023-8-19 12:47

频谱颜色不错，歌词同步颜色好像没调，花瓣也有点遮挡人物了呢。
漂亮的响应频谱制作。欣赏水芙蓉美女好帖{:4_199:}

醉美水芙蓉 发表于 2023-8-19 12:57

红影 发表于 2023-8-19 12:47
频谱颜色不错，歌词同步颜色好像没调，花瓣也有点遮挡人物了呢。
漂亮的响应频谱制作。欣赏水芙蓉美女好帖 ...

花瓣不知道哪里调？

红影 发表于 2023-8-19 19:08

醉美水芙蓉 发表于 2023-8-19 12:57
花瓣不知道哪里调？

css里的.clover就是啊，JS里除了打包内容外，都是调整花瓣的。{:4_204:}
页: [1]
查看完整版本: 追忆美