马黑黑 发表于 2023-4-27 13:22

明日妄想曲

<css-doodle id="mplayer">
        :doodle {
                @grid: 4 / 1024px 640px;
                background: url('https://638183.freep.cn/638183/t23/1/fgjk.jpg') no-repeat center/cover;
                margin: -80px 0 0 calc(50% - 593px);
                box-shadow: 0 0 8px #000;
                pointer-events: none;
                --state: running;
        }
        @match(i <= 12) {
                @place-cell: 50% 15%;
                @size: calc(@i() * 12px);
                @shape: bud 10;
                border: 6px solid #@repeat(6, @p());
                pointer-events: auto;
                cursor: pointer;
                animation: rot 4s infinite linear var(--state);
        }
        @match(i > 12) {
                background: gray;
                @size: @p(40px, 80px);
                @shape: @p(whale,fish);
                @place-cell: 720px 440px;
                transform: rotate(calc((@size() - @i() + 1) * 30deg)) translate(80px);
        }
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1937724657" 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 = () => mplayer.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-27 15:21

感谢老师分享，欣赏问好！{:4_187:}

梦油 发表于 2023-4-27 15:39

欣赏优美的音乐使我心旷神怡，谢谢分享。

醉美水芙蓉 发表于 2023-4-27 17:00

焱鑫磊 发表于 2023-4-27 18:11

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

马黑黑 发表于 2023-4-27 18:18

焱鑫磊 发表于 2023-4-27 18:11
欣赏老师佳作！

下午好

马黑黑 发表于 2023-4-27 18:19

梦缘 发表于 2023-4-27 15:21
感谢老师分享，欣赏问好！

{:4_190:}

马黑黑 发表于 2023-4-27 18:19

梦油 发表于 2023-4-27 15:39
欣赏优美的音乐使我心旷神怡，谢谢分享。

这支纯乐的确很好

马黑黑 发表于 2023-4-27 18:19

醉美水芙蓉 发表于 2023-4-27 17:00
欣赏老师漂亮播放器！

{:4_191:}

梦油 发表于 2023-4-27 20:09

马黑黑 发表于 2023-4-27 18:19
这支纯乐的确很好

看来，你对音乐也很有心得啊。

亦是金 发表于 2023-4-27 20:25

欣赏学习老师精彩制作！{:4_191:}

马黑黑 发表于 2023-4-27 21:14

亦是金 发表于 2023-4-27 20:25
欣赏学习老师精彩制作！

精彩谈不上，一般般了

马黑黑 发表于 2023-4-27 21:14

梦油 发表于 2023-4-27 20:09
看来，你对音乐也很有心得啊。

还行

马黑黑 发表于 2023-4-27 22:46

代码及解释：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=68266&extra=page%3D1

小辣椒 发表于 2023-4-27 23:14

黑黑的新制作，刚准备下看见了

小辣椒 发表于 2023-4-27 23:15

为什么要明日，今天不能想啊

小辣椒 发表于 2023-4-27 23:16

黑黑我下了，晚安~~~

小辣椒 发表于 2023-4-27 23:16

明天一起加班快乐！{:4_189:}

马黑黑 发表于 2023-4-27 23:27

小辣椒 发表于 2023-4-27 23:16
明天一起加班快乐！

{:4_181:}

马黑黑 发表于 2023-4-27 23:28

小辣椒 发表于 2023-4-27 23:16
黑黑我下了，晚安~~~

这个简单的，不过你没有看过 css-doodle 教程，可以补一补，不复杂
页: [1] 2
查看完整版本: 明日妄想曲