朵拉 发表于 2024-10-24 19:45

错季花开（学习马黑黑茉效果）

本帖最后由 朵拉 于 2024-10-27 23:04 编辑 <br /><br /><style>
#dbox {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/671a2f79d29ded1a8c04c9de.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 16px #00000080;
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        width: 180px;
        height: 180px;
        left: calc(50% - 100px);
        top: calc(50% - 150px);
        cursor: pointer;
        display: grid;
        place-items: center;
        filter: drop-shadow(1px 1px 0 #000);
        animation: rot linear 10s infinite var(--state);
}
#player::before {
        position: absolute;
        content: '';
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: plum;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="dbox">
        <audio id="aud" src="https://file.uhsea.com/2410/55914ecb17680ec2e5839c6ff7c105dcD5.mp3" autoplay="" loop=""></audio>
       
        <svg id="bsvg" width="1024" height="640">
                <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
                        <animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
                </rect>
        </svg>
        <div id="player"></div>
</div>

<script>
mState = () => {
        dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
        player.title = aud.paused ? '点击播放' : '点击暂停';
}
mkParticles = (circles, columns, target) => {
        var size = Math.floor(target.clientWidth / 2 / circles - 10);
        for(var i = 0; i < circles; i ++) {
                var distance = i * (size + 5) + size + 10;
                for(var k = 0; k < columns; k ++) {
                        var angle =360 / columns * k;
                        var span = document.createElement('span');
                        span.style.cssText += `
                                position: absolute;
                                width: ${size}px;
                                height: ${size}px;
                                background: #${Math.random().toString(16).substring(2,8)};
                                border-radius: 100% 80%;
                                transform: rotate(${angle}deg) translate(${distance}px);
                        `;
                        target.appendChild(span);
                }
        }
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkParticles(4,9,player);
</script>

朵拉 发表于 2024-10-24 19:46

@马黑黑
老师 晚上好，这个播放器不显示 怎么调整？{:4_190:}

红影 发表于 2024-10-24 21:07

varsize =和vardistance =，，，var后面有空格的吧，不知是不是这个原因，朵宝加个空格试试{:4_204:}

朵拉 发表于 2024-10-25 09:08

红影 发表于 2024-10-24 21:07
varsize =和vardistance =，，，var后面有空格的吧，不知是不是这个原因，朵宝加个空格试试

影宝好，按你的指点 已修改好，感谢 么么哒{:4_204:}

梦油 发表于 2024-10-25 09:29

欣赏佳作，问候朵拉。

红影 发表于 2024-10-25 19:54

朵拉 发表于 2024-10-25 09:08
影宝好，按你的指点 已修改好，感谢 么么哒

看到了，朵宝的制作很漂亮{:4_187:}

小辣椒 发表于 2024-10-25 20:44

欣赏朵拉的精彩制作{:4_171:}
页: [1]
查看完整版本: 错季花开（学习马黑黑茉效果）