朵拉 发表于 2024-11-1 19:46

他不懂（学习马黑黑Analogue Dreams效果）

<style>
#mama {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/6724bb90d29ded1a8c715617.jpg') no-repeat center/cover;
        border-radius: 6px;
        box-shadow: 3px 3px 8px gray;
        position: relative;
}
#bsvg {
        position: absolute;
        border-radius: 6px;
}
#player {
        --deg: 4turn;
        cursor: pointer;
        transform-origin: 512px 400px;
        animation: rot 8s linear infinite alternate var(--state);
}
#player:hover {
        --deg: 2turn;
}
.linepath {
        stroke-dasharray: 1664;
        animation: draw 8s linear infinite alternate var(--state);
}
@keyframes draw {
        from { stroke-dashoffset: 1664; }
        to { stroke-dashoffset: 0; }
}
@keyframes erase {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2636331993" autoplay loop></audio>
        <svg id="bsvg" width="100%" height="100%" fill="none" stroke="yellow" stroke-width="10" stroke-lineCap="round">
                <defs>
                        <g id="cpath" fill="rgba(0,100,100,.25)" stroke="yellow" stroke-width="2">
                                <title id="ctrMsg">播放/暂停</title>
                                <path d="M100 120,C-10 -30,210 -30,100 120"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(72 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(144 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(216 100 100)"/>
                                <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(288 100 100)"/>
                        </g>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/>
                <path class="linepath" d="M0 0 H1024 V640" />
                <path class="linepath" d="M1024 640 H0 V0" />
                <ellipse cx="512" cy="550" rx="80" ry="30" stroke="none" fill="rgba(0,100,100,.35)"/>
                <rect x="506" y="400" width="12" height="150" stroke="none" fill="rgba(0,100,100,.25)"/>
                <use id="player" href="#cpath" x="412" y="300" width="200" height="200"/>
        </svg>
</div>

<script>
mState = () => {
        mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-11-1 19:46

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

红影 发表于 2024-11-1 21:10

漂亮的制作。欣赏朵宝好帖{:4_187:}

小文 发表于 2024-11-1 22:23

黄色那个真好玩！{:4_187:}

梦江南 发表于 2024-11-2 08:20

欣赏老师漂亮音画。早上好！{:4_199:}

小辣椒 发表于 2024-11-2 14:15

欣赏朵拉漂亮的制作，这个播放器我都没有看过黑黑的教程，那个源码都不晓得{:4_198:}
页: [1]
查看完整版本: 他不懂（学习马黑黑Analogue Dreams效果）