首页 › 播放器 › 垄上行 歌手：黑鸭子组合

小辣椒 发表于 2024-2-16 20:19

垄上行 歌手：黑鸭子组合

<style>
#papa { margin: 150px 0 20px calc(50% - 781px); width: 1400px; height: 763px; background: lightgreen url('https://xlaj.cn/assets/file/zp/20240216193952.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa > img { position: absolute; transform: translate(1200px, -50px) rotate(-35deg); width: 80px;top:-90px; filter: hue-rotate(120deg); animation: fly 10s linear infinite var(--state); }
#papa > img:nth-of-type(2) { filter: hue-rotate(180deg); animation-delay: -5s; }
#iplay { position: absolute; bottom: 35px; left: calc(50% - 90px); width: 100px; height: 100px; border-style: dotted double ridge; border-color: orange red; border-width: 10px; border-radius: 50%; outline: 10px double olive; outline-offset: 2px; animation: flash .4s linear infinite alternate var(--state); cursor: pointer; }
#iplay::before { position: absolute; content: ''; inset: -10px; border-radius: 20%; background: url('https://xlaj.cn/assets/file/zp/20240216193928.png ') no-repeat center/cover; z-index: -1; animation: rotating 10s linear infinite var(--state); }
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
        <audio id="aud" src="https://xlaj.cn/assets/file/zp/20240216193835.mp3 " autoplay loop></audio>
        <img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
        <img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
        <div id="iplay"></div>
</div>

<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '#iplay',
                lrc_css: 'left: 60%; transform: translate(-50%); bottom: 310px;--bg: linear-gradient(rgba(50,205,50,.35),rgba(50,205,50,.45)); color: #fff;',
        });
};
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(iplay.offsetWidth / 2);

[...new Array(9).keys()].forEach(key => {
    var item = document.createElement('div');
    item.className = 'doll';
    var deg = key % 2 == 0 ? -360 : 360;
    item.style.cssText += `
      width: ${size}px;
      height: ${size}px;
      background-color: transparent;
      --duration: ${Math.random() * 10 + 10}s;
      --delay: ${Math.random() *-2}s;
      --deg: ${deg}deg;
    `;
    iplay.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
iplay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused

}

</script>

<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

liumang 发表于 2024-2-16 20:57

新做的{:6_239:}{:6_239:}

小辣椒 发表于 2024-2-27 22:04

liumang 发表于 2024-2-16 20:57
新做的

这首歌第二次做了{:5_146:}

liumang 发表于 2024-2-29 15:22

小辣椒 发表于 2024-2-27 22:04
这首歌第二次做了

这首歌好听，黑鸭子的和声也是很有特色的

查看完整版本: 垄上行 歌手：黑鸭子组合