梦江南 发表于 2024-10-1 14:31

学习黑黑老师的“茉”代码

本帖最后由 梦江南 于 2024-10-1 15:26 编辑 <br /><br /><style>
#dbox {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/66fb8f13f21886ccc0aff7c7.png') no-repeat center/cover;
        box-shadow: 4px 4px 16px #00000080;
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        width: 150px;
        height: 150px;
        left: calc(50% + 180px);
        top: calc(50% - 120px);
        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://music.163.com/song/media/outer/url?id=1968791360" 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 ? '点击播放' : '点击暂停';
        aud.paused ? vid.pause() : vid.play();
       
}
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 14:41

帖子制作得挺漂亮的。

起个网名好难 发表于 2024-10-1 15:27

本帖最后由 起个网名好难 于 2024-10-1 18:03 编辑 <br /><br /><svg width='600' view="0 0 600 100">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000" flood-opacity=".6"/>
                </filter>
        </defs>
        <text x="300" y="50" text-anchor="middle" dominant-baseline="middle" fill="#fff" stroke="none" font-family='微软雅黑' font-weight="bold" font-size="50" font-weight="bold" filter="url(#shadow)">节日快乐！
                <animate attributeName="fill" values="red;orange;yellow;green;cyan;blue;purple" dur="14s" repeatCount="indefinite" />
        </text>       
</svg>

梦江南 发表于 2024-10-1 15:35

愤怒的葡萄 发表于 2024-10-1 14:41
帖子制作得挺漂亮的。

谢谢葡萄老师，国庆节快乐！{:4_204:}

梦江南 发表于 2024-10-1 15:35

起个网名好难 发表于 2024-10-1 15:27
假日快乐！

谢谢老师，国庆节快乐！{:4_204:}

红影 发表于 2024-10-1 19:56

漂亮的制作，欣赏江南好帖{:4_199:}

红影 发表于 2024-10-1 20:00

其实跟着做是有好处的，可以用有自己的帖子漂亮了{:4_199:}

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

欣赏梦江南的精彩制作，这个直接套用了黑黑代码，图图效果不错{:4_199:}

梦江南 发表于 2024-10-2 09:06

红影 发表于 2024-10-1 19:56
漂亮的制作，欣赏江南好帖

影子节日快乐！早上好！{:4_187:}

梦江南 发表于 2024-10-2 09:08

红影 发表于 2024-10-1 20:00
其实跟着做是有好处的，可以用有自己的帖子漂亮了

说得对，对代码不大懂的人来讲，套用也是一种熟悉。{:4_204:}

梦江南 发表于 2024-10-2 09:09

小辣椒 发表于 2024-10-1 22:12
欣赏梦江南的精彩制作，这个直接套用了黑黑代码，图图效果不错

问好小辣椒，谢谢支持，节日快乐！{:4_187:}

冬天的雨 发表于 2024-10-2 09:26

好看好听，手机可以完美欣赏{:4_178:}

冬天的雨 发表于 2024-10-2 09:27

楼主，国庆佳节快乐

梦江南 发表于 2024-10-2 10:00

冬天的雨 发表于 2024-10-2 09:26
好看好听，手机可以完美欣赏

谢谢老师欣赏，这是黑黑老师的代码好。问好！{:4_187:}

梦江南 发表于 2024-10-2 10:01

冬天的雨 发表于 2024-10-2 09:27
楼主，国庆佳节快乐

谢谢，谢谢，冬雨版主节日快乐！{:4_204:}

红影 发表于 2024-10-2 13:41

梦江南 发表于 2024-10-2 09:06
影子节日快乐！早上好！

问好江南，继续祝福节日{:4_187:}

红影 发表于 2024-10-2 13:43

梦江南 发表于 2024-10-2 09:08
说得对，对代码不大懂的人来讲，套用也是一种熟悉。

等慢慢的越来越熟悉了，也可以做点修改了，一直到最后争取自己设计{:4_173:}
页: [1]
查看完整版本: 学习黑黑老师的“茉”代码