论坛 › 音乐沙龙 › 祝大家国庆节快乐！

小辣椒 发表于 2024-10-1 01:04

祝大家国庆节快乐！

<style>
#dbox {
        margin: 140px 0 30px calc(50% - 727px);
        width: 1270px;
        height: 703px;
        background: url('https://file.uhsea.com/2411/22c561d1ed3661df756fcec84ff80637X4.gif') no-repeat center/cover;
        box-shadow: 4px 4px 16px #00000080;

        position: relative;
}
#player {
        position: absolute;
        width: 120px;
        height: 120px;
        left: calc(82.8% - 100px);
        top: calc(50% - 195px);
        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: Purple;
}
@keyframes rot { to { transform: rotate(360deg); } }

#dt2{ position: absolute; width:32px; height: 32px; top: 120px; left: 900px; }

</style>

<div id="dbox">

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />

        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20210930/01.mp3" autoplay loop></audio>
        <svg id="bsvg" width="1270" height="703">
                <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="Red" 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) => {
        let size = Math.floor(target.clientWidth / 2 / circles - 10);
        for(let i = 0; i < circles; i ++) {
                let distance = i * (size + 5) + size + 10;
                for(let k = 0; k < columns; k ++) {
                        let angle =360 / columns * k;
                        let 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-1 01:07

祝花潮论坛的朋友们国庆节快乐！{:4_205:}

小辣椒 发表于 2024-10-1 01:08

@马黑黑

直接套用一个【茉】的播放器效果{:4_205:}

黑黑国庆节快乐！

起个网名好难 发表于 2024-10-1 01:09

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F81722967%2F0b9667b8012f03dc6364a61f655ea3e2.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvODE3MjI5NjcvMGI5NjY3YjgwMTJmMDNkYzYzNjRhNjFmNjU1ZWEzZTIuZ2lm%2Fsign%2Fdfc7062e56d3a4ade1db7912bc8d84ba.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1730308177&t=808d7c1d9be7274cb4cb3c2c611ddad5

小辣椒 发表于 2024-10-1 01:11

起个网名好难 发表于 2024-10-1 01:09


难难你的动图真的太多了，厉害哦{:4_173:}

起个网名好难 发表于 2024-10-1 01:22

网上找的

愤怒的葡萄 发表于 2024-10-1 05:04

祝坛友国庆节快乐！~~~

樵歌 发表于 2024-10-1 07:19

今天阳光灿烂，我和小辣椒一起为祖国祝福!{:4_176:}

马黑黑 发表于 2024-10-1 08:07

小辣椒 发表于 2024-10-1 01:08
@马黑黑

直接套用一个【茉】的播放器效果


同乐同乐。帖子华丽丽的

梦江南 发表于 2024-10-1 08:21

<svg width="500" height="120" viewBox="-125 -30 250 60">
        <text x="0" y="18" fill="Red" stroke="BlueViolet" stroke-width="2" stroke-dasharray="60 10" font-size="50" font-weight="bold" text-anchor="middle">
                国庆节快乐
                <animate attributeName="stroke-dashoffset" from="-70" to="0" dur="2s" begin="0s" repeatCount="indefinite"/>
        </text>
</svg>

梦油 发表于 2024-10-1 09:09

伟大的社会主义祖国万岁！
祝小辣椒和朋友们国庆节快乐！

红影 发表于 2024-10-1 10:37

把小播放的位置很好啊，这个制作真漂亮。
欣赏亲爱的好帖，同祝大家国庆快乐{:4_187:}{:4_177:}

庶民 发表于 2024-10-1 10:49

国庆节快乐！

小辣椒 发表于 2024-10-1 22:20

起个网名好难 发表于 2024-10-1 01:22
网上找的

直接有链接找也是不错的

小辣椒 发表于 2024-10-1 22:20

愤怒的葡萄 发表于 2024-10-1 05:04
祝坛友国庆节快乐！~~~

问好葡萄，祝国庆节快乐！

小辣椒 发表于 2024-10-1 22:21

樵歌 发表于 2024-10-1 07:19
今天阳光灿烂，我和小辣椒一起为祖国祝福!

樵哥哥国庆节快乐！

小辣椒 发表于 2024-10-1 22:21

马黑黑 发表于 2024-10-1 08:07
同乐同乐。帖子华丽丽的

黑黑国庆节快乐！

小辣椒 发表于 2024-10-1 22:22

梦江南 发表于 2024-10-1 08:21
国庆节快乐

梦江南国庆节快乐！

小辣椒 发表于 2024-10-1 22:22

梦油 发表于 2024-10-1 09:09
伟大的社会主义祖国万岁！
祝小辣椒和朋友们国庆节快乐！

梦油晚上好，祝国庆节快乐！

小辣椒 发表于 2024-10-1 22:22

红影 发表于 2024-10-1 10:37
把小播放的位置很好啊，这个制作真漂亮。
欣赏亲爱的好帖，同祝大家国庆快乐

亲爱的，国庆节快乐！

查看完整版本: 祝大家国庆节快乐！