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

红影

: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); } } :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([《逍遥咏》‍‍宋太宗‍ 一法归千法，真如即是真。迷情终不见，达了悟知因。海纳分他境，心平故可亲。但明修炼路，善业尽随身。]); } animation: show .6s calc((@i - 1) * .6s) linear forwards; @keyframes show { to { opacity: 1; } }

红影

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

红影

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

红影

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

马黑黑

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

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

梦油

配乐极好。

千羽

这么多的花儿播放器，色调都挺好看的

千羽

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

千羽

问好影儿，新周快乐

南无月

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

一斛珠

影子腻害腻害

一斛珠

看黑黑老师的代码，看不懂

红影

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

谢谢水芙蓉鼓励

红影

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

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

红影

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

音乐随手找的，主要是学习一下代码

红影

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

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

红影

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

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

红影

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

今天是周末啊，新周还得过完周六周日才到呢

红影

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

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