马黑黑 发表于 2023-8-21 14:20

老唱片的诱惑

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/lipm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; --state: running; }
.leaf { position: absolute; font-size: 30px; top: -20%; color: green; opacity: .64; animation: drop var(--duration) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 105%; transform: rotate(1turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1415245956" autoplay loop></audio>

<script>
let leaves = ['&#127809;','&#127810;','☘','&#127808;','&#127807;','&#127811;'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/plater_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: [ ],
                player_css: `
                        right: -4px;
                        bottom: 10px;
                        color: white;
                        --color1: snow;
                        --color2: black;
                `,
                lrc_css: `
                        bottom: 15px;
                        --color: linear-gradient(rgba(216,204,184,.3),rgba(216,204,184,.7));
                        --bg: linear-gradient(rgba(97,77,48,.25), rgba(97,77,48,.6));
                `,
        });
}
Array.from({length: 30}).forEach((item, key) => {
        item = document.createElement('span');
        item.className = 'leaf';
        item.innerHTML = leaves;
        item.style.cssText += `
                left: ${Math.random() * 100}%;
                font-size: ${30 + Math.floor(Math.random() * 30)}px;
                --duration: ${10 + Math.random() * 10}s;
                --delay: ${10 - Math.random() * 25}s;
        `;
        papa.appendChild(item);
});
</script>

马黑黑 发表于 2023-8-21 14:21

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/lipm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; --state: running; }
.leaf { position: absolute; font-size: 30px; top: -20%; color: green; opacity: .64; animation: drop var(--duration) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 105%; transform: rotate(1turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1415245956" autoplay loop></audio>

<script>
let leaves = ['&#127809;','&#127810;','☘','&#127808;','&#127807;','&#127811;'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/plater_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: [ ],
                player_css: `
                        right: -4px;
                        bottom: 10px;
                        color: white;
                        --color1: snow;
                        --color2: black;
                `,
                lrc_css: `
                        bottom: 15px;
                        --color: linear-gradient(rgba(216,204,184,.3),rgba(216,204,184,.7));
                        --bg: linear-gradient(rgba(97,77,48,.25), rgba(97,77,48,.6));
                `,
        });
}
Array.from({length: 30}).forEach((item, key) => {
        item = document.createElement('span');
        item.className = 'leaf';
        item.innerHTML = leaves;
        item.style.cssText += `
                left: ${Math.random() * 100}%;
                font-size: ${30 + Math.floor(Math.random() * 30)}px;
                --duration: ${10 + Math.random() * 10}s;
                --delay: ${10 - Math.random() * 25}s;
        `;
        papa.appendChild(item);
});
</script>

梦油 发表于 2023-8-21 15:43

八位少女姿态各异、美不胜收。

红影 发表于 2023-8-21 16:35

这么多漂亮的MM，这么多飘落的字符雨。这个唱片指针还是一点点靠向圆心，很细致的制作{:4_199:}

红影 发表于 2023-8-21 16:42

这个光盘还是代码画的，真漂亮{:4_199:}

马黑黑 发表于 2023-8-21 17:38

红影 发表于 2023-8-21 16:42
这个光盘还是代码画的，真漂亮

这个是之前应亚伦之邀弄的，今天中午把它封装到JS插件里

马黑黑 发表于 2023-8-21 17:38

梦油 发表于 2023-8-21 15:43
八位少女姿态各异、美不胜收。

逛庙会的样纸{:4_170:}

马黑黑 发表于 2023-8-21 17:39

红影 发表于 2023-8-21 16:35
这么多漂亮的MM，这么多飘落的字符雨。这个唱片指针还是一点点靠向圆心，很细致的制作

还好还好

梦油 发表于 2023-8-21 18:19

马黑黑 发表于 2023-8-21 17:38
逛庙会的样纸

那可吸引眼球啦。

马黑黑 发表于 2023-8-21 19:14

梦油 发表于 2023-8-21 18:19
那可吸引眼球啦。

还行还行

小辣椒 发表于 2023-8-21 19:41

漂亮的老唱片，重温经典的过往，加首梅艳芳的老歌更加精彩{:4_170:}

小辣椒 发表于 2023-8-21 19:42

也是js的，黑黑辛苦{:4_187:}

小辣椒 发表于 2023-8-21 19:44

@东篱闲人 今天的美女特别多，可惜老头最近失踪了，老头喜欢美女的

红影 发表于 2023-8-21 21:12

马黑黑 发表于 2023-8-21 17:38
这个是之前应亚伦之邀弄的，今天中午把它封装到JS插件里

嗯嗯，那个指针好像还是亚伦弄的{:4_173:}

红影 发表于 2023-8-21 21:13

马黑黑 发表于 2023-8-21 17:39
还好还好

这个几个美女好像仿的敦煌飞天的动作呢{:4_173:}

马黑黑 发表于 2023-8-21 22:07

红影 发表于 2023-8-21 21:13
这个几个美女好像仿的敦煌飞天的动作呢

不是的

马黑黑 发表于 2023-8-21 22:07

红影 发表于 2023-8-21 21:12
嗯嗯，那个指针好像还是亚伦弄的

这个我另找的

马黑黑 发表于 2023-8-21 22:09

小辣椒 发表于 2023-8-21 19:44
@东篱闲人 今天的美女特别多，可惜老头最近失踪了，老头喜欢美女的

{:4_176:}

红影 发表于 2023-8-21 22:25

马黑黑 发表于 2023-8-21 22:07
不是的

那是什么动作，我看着很像啊{:4_173:}

红影 发表于 2023-8-21 22:25

马黑黑 发表于 2023-8-21 22:07
这个我另找的

哦哦，那我说错了，不好意思啊{:4_204:}
页: [1] 2 3 4
查看完整版本: 老唱片的诱惑