朵拉 发表于 2023-8-23 23:31

毒 药(马黑黑原创)

本帖最后由 朵拉 于 2023-8-23 23:38 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/64e62506661c6c8e5438bc76.jpg') 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=2066654616" 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: blue;
                        --color1: snow;
                        --color2: blue;
                `,
                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-23 23:38

@马黑黑
马师 晚上好,学生交作业,请指正哈~~{:4_190:}

马黑黑 发表于 2023-8-24 07:40

素雅的画面,体现出来的情绪与歌曲相配套。

插件支持歌词同步,歌词应完善起来。

红影 发表于 2023-8-24 10:11

漂亮,欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2023-8-24 13:04

欣赏朵拉的精彩制作{:4_187:}
页: [1]
查看完整版本: 毒 药(马黑黑原创)