432赫兹

马黑黑

: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); } }

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t23/1/hx1.jpg') no-repeat center/cover;
   
7.         box-shadow: 0 0 8px black;
   
8.         z-index: 1;
   
9.         position: relative;
   
10.         --state: paused;
    
11. }
    
12. </style>
    
13. 
    
14. <div id="papa">
    
15. <css-doodle id="mplayer">
    
16.         :doodle {
    
17.                 @grid: 1x100 / 300px;
    
18.                 position: absolute;
    
19.                 bottom: 0;
    
20.                 cursor: pointer;
    
21.                 animation: rot 6s infinite linear var(--state);
    
22.         }
    
23.         @place-cell: center;
    
24.         @size: calc(100% - @calc(@index - 1) * 1%);
    
25.         background: hsla(
    
26.                 calc(calc(100 - @index) * 2.55),
    
27.                 calc(@index * 1%),
    
28.                 65%,
    
29.                 calc(@index / 100)
    
30.         );
    
31.         clip-path: @shape(
    
32.                 fill-rule: evenodd;
    
33.                 split: 200;
    
34.                 scale: .45;
    
35.                 x: cos(2t) + cos(π - 5t);
    
36.                 y: sin(2t) + sin(π - 5t);
    
37.         );
    
38.         @keyframes rot { to { transform: rotate(360deg); } }
    
39. </css-doodle>
    
40. </div>
    
41. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2017513243" autoplay loop></audio>
    
42. 
    
43. <script>
    
44. (function() {
    
45.         let script = document.createElement('script');
    
46.         script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
    
47.         document.head.appendChild(script);
    
48.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
49.         aud.addEventListener('play', mState, false);
    
50.         aud.addEventListener('pause', mState, false);
    
51.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
52. })();
    
53. </script>

复制代码

马黑黑

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

樵歌

木太明白

红影

这个播放器真漂亮，有这么多层次呢

红影

黑黑又带来了新的播放器玩法

梦缘

很美妙的声音，欣赏点赞！

马黑黑

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

晚上好

马黑黑

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

慢慢会明白的

马黑黑

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

这个需要深色背景烘托

马黑黑

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

css-doodle封装的clip-path算法

樵歌

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

肚里沒货，一直迷糊

焱鑫磊

欣赏老师佳作！

马黑黑

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

下午好

马黑黑

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

迷糊是一种幸福

晓哥

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

冬天的雨

欣赏马老师的高级制作

冬天的雨

这个花瓣播放器真漂亮

冬天的雨

看了下面的代码分享，花瓣纯手工打造，马老师太厉害了