马黑黑 发表于 2023-5-23 12:14

Harmonia

<css-doodle grid="6x1" id="mplayer">
        :doodle {
                @size: 1000px 779px;
                background: url('https://638183.freep.cn/638183/t23/webp1/harmonia.webp');
                box-shadow: 0 0 6px #000;
                position: relative;
                z-index: 1;
                margin: 0 0 0 calc(50% - 581px);
                --state: paused;
        }
        @size: @r(60,160)px;
        position: absolute;
        background: linear-gradient(@m3(rgb(@m3(@r(255)))));
        clip-path: @shape(
                points: 300;
                turn: 2;
                frame: 2;
                scale: .5;
                r: seq(.85, 10, .85);
        );
        border-radius: 50%;
        cursor: pointer;
        offset-path: path('M100 100 Q500 400 900 100');
        offset-distance: calc((@i - 1) * 20%);
        animation: rot 8s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1335047751" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = '/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-5-23 12:17

评个分就变了

马黑黑 发表于 2023-5-23 12:19

绿叶清舟 发表于 2023-5-23 12:17
评个分就变了

装饰物是随机设定的，所以每次打开或刷新，效果都会不同

小文 发表于 2023-5-23 14:24

女人吸引了眼球，破坏了环境的清幽。问好！

红影 发表于 2023-5-23 15:30

这个只变颜色和大小，位置不变呢。漂亮{:4_187:}

红影 发表于 2023-5-23 15:41

颜色还是线性渐变的，这个挺神奇{:4_187:}

朵拉 发表于 2023-5-23 15:55

啧啧 漂亮，我要学习下~~{:4_190:}

红影 发表于 2023-5-23 16:19

@m3找半天没找到是什么，如果是@multiple的简写，后面不是要跟括号的么？

醉美水芙蓉 发表于 2023-5-23 16:51

梦缘 发表于 2023-5-23 17:22

{:4_187:}转动的圆环，感谢老师的代码分享！

南无月 发表于 2023-5-23 18:03

圈圈的颜色从背景图上取的一样，协调之极。美

马黑黑 发表于 2023-5-23 18:05

南无月 发表于 2023-5-23 18:03
圈圈的颜色从背景图上取的一样，协调之极。美

这是随机的渐变背景

南无月 发表于 2023-5-23 18:08

马黑黑 发表于 2023-5-23 18:05
这是随机的渐变背景

好的，我多刷几次

马黑黑 发表于 2023-5-23 18:10

南无月 发表于 2023-5-23 18:08
好的，我多刷几次

中心是空的，和背景色就一样了

马黑黑 发表于 2023-5-23 18:10

梦缘 发表于 2023-5-23 17:22
转动的圆环，感谢老师的代码分享！

感谢支持

罗浮梦 发表于 2023-5-23 19:15

好看好看{:4_199:}

马黑黑 发表于 2023-5-23 19:19

罗浮梦 发表于 2023-5-23 19:15
好看好看

感谢支持。晚上好。

南无月 发表于 2023-5-23 22:02

马黑黑 发表于 2023-5-23 18:10
中心是空的，和背景色就一样了

{:4_170:}这个明白。突然发现渐变色百搭啊。。。

马黑黑 发表于 2023-5-23 23:37

南无月 发表于 2023-5-23 22:02
这个明白。突然发现渐变色百搭啊。。。

反正不是百搭

南无月 发表于 2023-5-24 17:46

马黑黑 发表于 2023-5-23 23:37
反正不是百搭

百搭的好搭，白搭的不好搭
页: [1] 2 3
查看完整版本: Harmonia