论坛 › 马黑黑教程专版 › 《逍遥咏》（学习黑黑优弧劣弧的调整方法）

红影 发表于 2023-5-25 20:29

《逍遥咏》（学习黑黑优弧劣弧的调整方法）

<style>
#papa {margin: 80px 0 0 calc(50% - 621px);width: 1080px;height: 710px;background: tan url('https://pic1.imgdb.cn/item/646f3e06f024cca173a527f5.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
css-doodle{position: absolute;}
</style>
<div id="papa">
<css-doodle grid="9x1" id="mplayer">
        :doodle {
                @size: 1080px 710px;               
                z-index: 1;               
        }
        @size: 80px;
        position: absolute;
        background: linear-gradient(@m3(rgb(@m3(@r(255)))));
        clip-path: @shape(
                fill: evenodd;
                points: 300;
                scale: .45;
                x: cos(2t) + cos(π - 7t);
                y: sin(2t) + sin(7t);
        );       
        cursor: pointer;
        offset-path: path('M171 541 A212 212 0 1 1 532 541');
        offset-distance: calc((@i - 1) * 12.5%);
        animation: rot 8s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle grid="6x10" click-to-update>
        :doodle {
                @size: 320px 420px;
                z-index: 100;
                position: absolute;
                right: 50px;
                top: 160px;
                cursor: pointer;
                }
        @size: 40px;
        @place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
        font: normal 30px / 40px sans-serif;
        color: rgb(@m3(@r(255)));
        text-shadow: 1px 1px 2px #000;
        opacity: 0;
        :before {
                content: @pn([《逍遥咏》&zwj;&zwj;宋太宗&zwj; 一法归千法，真如即是真。迷情终不见，达了悟知因。海纳分他境，心平故可亲。但明修炼路，善业尽随身。]);
        }
        animation: show .6s calc((@i - 1) * .6s) linear forwards;
        @keyframes show { to { opacity: 1; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1945434559" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
(function() {
        let script = document.createElement('script');
        script.src = '/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-5-25 20:35

不知道为什么到论坛里文字定位全变了，在本地的时候是调好的，到这里完全不同了@马黑黑{:4_173:}

红影 发表于 2023-5-25 20:45

是不是position: absolute;不能放在:doodle {}里面？

红影 发表于 2023-5-25 20:46

这个就是第4个参数用的1，取优弧，第5个参数也是用的1

醉美水芙蓉 发表于 2023-5-25 21:10

马黑黑 发表于 2023-5-25 21:12

红影 发表于 2023-5-25 20:35
不知道为什么到论坛里文字定位全变了，在本地的时候是调好的，到这里完全不同了@马黑黑

你在帖子里用了两个 css-doodle 标签。使用多个 css-doodle 标签，需要一个父 div 装载它们，两个 css-doodle 都设置为绝对定位。你再改改。

梦油 发表于 2023-5-25 21:26

配乐极好。

千羽 发表于 2023-5-25 21:34

这么多的花儿播放器，色调都挺好看的{:4_187:}

千羽 发表于 2023-5-25 21:38

很佛系的图。花儿播放器的围绕旋转是点睛之笔美美哒{:4_187:}

千羽 发表于 2023-5-25 21:39

问好影儿，新周快乐{:4_185:}

南无月 发表于 2023-5-25 21:45

影子厉害，一群小花播和字都十分听话的排列，代码娴熟之极{:4_187:}

一斛珠 发表于 2023-5-25 22:15

影子腻害腻害

一斛珠 发表于 2023-5-25 22:16

看黑黑老师的代码，看不懂{:4_173:}

红影 发表于 2023-5-26 13:55

醉美水芙蓉 发表于 2023-5-25 21:10
红影做得漂亮！

谢谢水芙蓉鼓励{:4_187:}

红影 发表于 2023-5-26 13:57

马黑黑 发表于 2023-5-25 21:12
你在帖子里用了两个 css-doodle 标签。使用多个 css-doodle 标签，需要一个父 div 装载它们，两个 css-do ...

嗯嗯，明白了。已经改好了。
主要是感觉弄明白优劣弧了，忍不住弄个帖子亲手尝试一下做大半个圆的方法{:4_173:}

红影 发表于 2023-5-26 13:58

梦油 发表于 2023-5-25 21:26
配乐极好。

音乐随手找的，主要是学习一下代码{:4_173:}

红影 发表于 2023-5-26 13:59

千羽 发表于 2023-5-25 21:34
这么多的花儿播放器，色调都挺好看的

这些花儿都是代码啊，涂色方法也是黑黑帖子里的代码{:4_173:}

红影 发表于 2023-5-26 14:00

千羽 发表于 2023-5-25 21:38
很佛系的图。花儿播放器的围绕旋转是点睛之笔美美哒

嗯，主要是学习一下怎样设置圆形环绕，还好弄明白了{:4_173:}

红影 发表于 2023-5-26 14:01

千羽 发表于 2023-5-25 21:39
问好影儿，新周快乐

今天是周末啊，新周还得过完周六周日才到呢{:4_173:}

红影 发表于 2023-5-26 14:06

南无月 发表于 2023-5-25 21:45
影子厉害，一群小花播和字都十分听话的排列，代码娴熟之极

不熟啊，就是学习体会一下A圆弧里的7个参数到底怎么用的。
反过来讲，当设定了空间的圆或圆弧后，可以设计任何一个起点和终点，来得到自己要的那段圆弧。
比如你头像里吊床边缘，就用A能得到这段弧，然后沿着这段弧的路径放点想要的东西。

查看完整版本: 《逍遥咏》（学习黑黑优弧劣弧的调整方法）