论坛 › 『唯美音画』 › 口哨音乐欣赏

宁静 发表于 2023-3-3 14:35

口哨音乐欣赏

<style>
#papa {
        --state: paused;
        margin: 80px 0 0 calc(50% - 520px);
        width: 1022px;
        height: 581px;
        background: lightblue url('https://pic.imgdb.cn/item/63fed4d4f144a0100764089c.gif') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
}
.moon {
        position: absolute;         
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        cursor: pointer;
        z-index: 999;
}
.moon::before, .moon::after {
        position: absolute;
        content: '';
                top: 20px;
        border-radius: 50%;
}
.moon::before{
               
        width: 80px;
        height: 80px;
        background: transparent;
        box-shadow: 20px 10px 0 Silver;
        animation: swing linear 2s infinite alternate var(--state);
}
.moon::after{
        background: Silver;
        width: 30px;
        height: 30px;
        left: 35px;
        top: 55px;
}
.reflect {
        bottom: 100px;
        filter: blur(1.2px) opacity(.15);
        transform: rotateX(-180deg);
}
.star {
        position: absolute;
        background: lightblue;
        box-shadow: 0 0 2px white inset;
        opacity: 0;
        filter: blur(1.5px);
        display: block;
}
#btnFs {
        position: absolute;
        left: 48%;
        bottom: 50px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid SlateBlue;
        color: SlateBlue;
        display: none;
        cursor: pointer;
}
@keyframes swing { to { transform: rotate(45deg); } }
@keyframes flash { to { transform: rotate(45deg); opacity: .6; } }
</style>

<div id="papa">
        <div class="moon"></div>
        <div class="moon reflect"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20200319/yy/01.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let moons = document.querySelectorAll('.moon'), fs = false, timerId;
        for(let j = 0; j < 600; j ++) {
                let star = document.createElement('span'), size = Math.ceil(Math.random() * 4);
                star.className = 'star';
                star.style.cssText += `
                        left: ${Math.random() * 100}%;
                        top: ${Math.random() * 50}%;
                        width: ${size}px;
                        height: ${size}px;
                        animation: flash 1s ${Math.random() * 20}s infinite alternate var(--state);
                `;
                papa.appendChild(star);
        }
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        moons.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        aud.addEventListener('error', () => {
                if(aud.error.code === 4) aud.src = 'https://wj1.zp68.com:812/lxx/yunhua/20200319/yy/02.mp3';
        });       
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

宁静 发表于 2023-3-3 14:36

手机欣赏点击播放器---月亮

宁静 发表于 2023-3-3 14:40

双月亮都可以点击，下面的是月亮阴影

沉默 发表于 2023-3-3 14:52

音乐感觉有点断断续续

沉默 发表于 2023-3-3 14:53

你自己手机上去再听听

宁静 发表于 2023-3-3 14:59

沉默 发表于 2023-3-3 14:53
你自己手机上去再听听

我听是好的

宁静 发表于 2023-3-3 14:59

沉默 发表于 2023-3-3 14:52
音乐感觉有点断断续续

你手机浏览器问题

沉默 发表于 2023-3-3 15:00

宁静 发表于 2023-3-3 14:59
你手机浏览器问题

我换手机听

宁静 发表于 2023-3-3 15:00

沉默 发表于 2023-3-3 15:00
我换手机听

我换了2只手机都可以的

沉默 发表于 2023-3-3 15:01

现在好像是好的，没有问题了

查看完整版本: 口哨音乐欣赏