马黑黑 发表于 2023-4-24 12:39

432赫兹

<style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/1/hx1.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px black;
        z-index: 1;
        position: relative;
        --state: paused;
}
</style>

<div id="papa">
<css-doodle id="mplayer">
        :doodle {
                @grid: 1x100 / 300px;
                position: absolute;
                bottom: 0;
                cursor: pointer;
                animation: rot 6s infinite linear var(--state);
        }
        @place-cell: center;
        @size: calc(100% - @calc(@index - 1) * 1%);
        background: hsla(
                calc(calc(100 - @index) * 2.55),
                calc(@index * 1%),
                65%,
                calc(@index / 100)
        );
        clip-path: @shape(
                fill-rule: evenodd;
                split: 200;
                scale: .45;
                x: cos(2t) + cos(π - 5t);
                y: sin(2t) + sin(π - 5t);
        );
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2017513243" autoplay loop></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-4-24 12:41

帖子代码
<style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/1/hx1.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px black;
        z-index: 1;
        position: relative;
        --state: paused;
}
</style>

<div id="papa">
<css-doodle id="mplayer">
        :doodle {
                @grid: 1x100 / 300px;
                position: absolute;
                bottom: 0;
                cursor: pointer;
                animation: rot 6s infinite linear var(--state);
        }
        @place-cell: center;
        @size: calc(100% - @calc(@index - 1) * 1%);
        background: hsla(
                calc(calc(100 - @index) * 2.55),
                calc(@index * 1%),
                65%,
                calc(@index / 100)
        );
        clip-path: @shape(
                fill-rule: evenodd;
                split: 200;
                scale: .45;
                x: cos(2t) + cos(π - 5t);
                y: sin(2t) + sin(π - 5t);
        );
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2017513243" autoplay loop></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-4-24 12:52

432赫兹能创造出美妙无比的作品，比如水结晶，比如这支用于给猫咪催眠的轻音乐。大自然的奇妙在于频率的协调，432赫兹音准是所有音协互动中最婉转迷人的一个，由它主导或协助下的一切作品，都能令人赏心悦目、心灵宁静。

樵歌 发表于 2023-4-24 13:53

木太明白{:4_203:}

红影 发表于 2023-4-24 16:48

这个播放器真漂亮，有这么多层次呢{:4_187:}

红影 发表于 2023-4-24 16:49

黑黑又带来了新的播放器玩法{:4_199:}

醉美水芙蓉 发表于 2023-4-24 17:03

梦缘 发表于 2023-4-24 17:05

很美妙的声音，欣赏点赞！{:4_204:}

马黑黑 发表于 2023-4-24 22:31

梦缘 发表于 2023-4-24 17:05
很美妙的声音，欣赏点赞！

晚上好

马黑黑 发表于 2023-4-24 22:33

樵歌 发表于 2023-4-24 13:53
木太明白

慢慢会明白的

马黑黑 发表于 2023-4-24 22:34

红影 发表于 2023-4-24 16:48
这个播放器真漂亮，有这么多层次呢

这个需要深色背景烘托

马黑黑 发表于 2023-4-24 22:35

红影 发表于 2023-4-24 16:49
黑黑又带来了新的播放器玩法

css-doodle封装的clip-path算法

樵歌 发表于 2023-4-25 07:32

马黑黑 发表于 2023-4-24 22:33
慢慢会明白的

肚里沒货，一直迷糊{:4_173:}

焱鑫磊 发表于 2023-4-25 09:07

欣赏老师佳作！{:4_187:}

马黑黑 发表于 2023-4-25 17:35

焱鑫磊 发表于 2023-4-25 09:07
欣赏老师佳作！

下午好

马黑黑 发表于 2023-4-25 17:35

樵歌 发表于 2023-4-25 07:32
肚里沒货，一直迷糊

迷糊是一种幸福

晓哥 发表于 2023-4-26 11:38

艾玛，这音乐关联上js控制自己绘制的图样，催眠般美妙，赏学！

冬天的雨 发表于 2023-4-26 12:33

欣赏马老师的高级制作{:4_178:}

冬天的雨 发表于 2023-4-26 12:36

这个花瓣播放器真漂亮{:4_199:}

冬天的雨 发表于 2023-4-26 12:37

看了下面的代码分享，花瓣纯手工打造，马老师太厉害了{:4_178:}
页: [1] 2 3
查看完整版本: 432赫兹