css-doodle：文本在椭圆路径上运动
<style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>文字在椭圆路径上绕圈运动，在按椭圆路径布局的基础上加以简单改造即可：让每一个文本所在的单元格在各自的位置 + 100% 的地方上起步，然后回到各自的位置，这是顺时针运动，需要反时针的将起步和终点调换过来即可。</p>
<div class="mama">
<pre class="hCode" contentEditable="true"><css-doodle grid="10x1">
:doodle {
@size: 400px 200px;
border: 1px solid rebeccapurple;
}
@size: 40px;
@place: 20px 20px;
font: bold 30px sans-serif;
font-shadow: 1px 1px 2px #000;
color: #purple;
:after { content: '@pn([君不见黄河之水天上来])'; }
offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z');
<!-- offset-distance: calc(100 / @size * (@i - 1) * 1%); -->
offset-rotate: <span style="color: red">0deg</span>;
animation: move 8s infinite linear;
@keyframes move {
from { offset-distance: calc(100% / @size * (@i - 1) + 100%); }
to { offset-distance: calc(100% / @size * (@i - 1)); }
}
</css-doodle></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>文字在运动的时候有些抖动，原因是 offset-rotate 的设置，设置为 auto 时抖动现象消失，大家可以试试看。</p>
</div>
<script>
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script>
这个椭圆上的文字可以转动起来了，黑黑太棒了{:4_199:} 设置为设置为 auto 时，抖动没了，但文字的朝向不对了{:4_173:} 关节暗还是在offset-distance: calc(100% / @size * (@i - 1));上面啊，每个格子按自己的百分比行走？这个之前一点不知道，学习了{:4_187:} <!-- offset-distance: calc(100 / @size * (@i - 1) * 1%); -->
这个解释一下呗{:4_173:} 红影 发表于 2023-6-12 21:56
这个解释一下呗
这句注释掉了，是原来布局用的，在这里，它不需要 红影 发表于 2023-6-12 21:54
关节暗还是在offset-distance: calc(100% / @size * (@i - 1));上面啊，每个格子按自己的百分比行走？这个 ...
这是一种实现方式：每一个单元格按自己的序号排列，100% / @size * (@i - 1) 中，100% 是全路径，@size 是单元格总数，它乘以 ( 序号 - 1 )，得到的结果 和 100% 相除，就是单元格应在的位置的百分比。 醉美水芙蓉 发表于 2023-6-12 21:49
那天我说让文字转圈圈，老师真得做到了！厉害喔！
懂得原理，这是简单的 红影 发表于 2023-6-12 21:43
设置为设置为 auto 时，抖动没了，但文字的朝向不对了
对 马黑黑 发表于 2023-6-12 22:18
这句注释掉了，是原来布局用的，在这里，它不需要
去看了一下前面的那贴，果然{:4_204:} 马黑黑 发表于 2023-6-12 22:23
这是一种实现方式：每一个单元格按自己的序号排列，100% / @size * (@i - 1) 中，100% 是全路径，@size...
这个挺难理解的，能理解这个，基本上就能明白这种转动怎么回事了。{:4_204:} 马黑黑 发表于 2023-6-12 22:23
对
还好抖动不是很剧烈，不太受影响{:4_173:} 红影 发表于 2023-6-12 23:18
还好抖动不是很剧烈，不太受影响
抖抖更健康 红影 发表于 2023-6-12 23:17
这个挺难理解的，能理解这个，基本上就能明白这种转动怎么回事了。
就像10个人围圈圈吧，每个人的位置平均分布在这个圈圈上，然后出发，走到出发点，就是走了 100%。
张三，原来在圈圈的 10% 处，他要走完一圈（一圈为100%），需要 100% + 10%。这个能理解不？ 红影 发表于 2023-6-12 23:14
去看了一下前面的那贴，果然
{:4_181:}
我留着就是像让大家比较与 keyframes 里的关系 马黑黑 发表于 2023-6-12 23:21
抖抖更健康
嗯嗯，就这么抖着挺好，跟抖肩舞蹈似的{:4_173:} 马黑黑 发表于 2023-6-12 23:24
就像10个人围圈圈吧，每个人的位置平均分布在这个圈圈上，然后出发，走到出发点，就是走了 100%。
张 ...
嗯嗯，现在知道了。需要算上原位置。这个是椭圆的特点。
去回头看了一下圆，那是也是要加上原来的各自转动度数，之前没去仔细理解，现在连那个也一并弄明白了{:4_199:}
对于单个图形，直接转360，对于不同分布的系列图形，要加上原来的信息。 马黑黑 发表于 2023-6-12 23:25
我留着就是像让大家比较与 keyframes 里的关系
嗯，这个帖子太好了，通过这个帖子，又学到了好东西{:4_199:} 红影 发表于 2023-6-13 10:33
嗯，这个帖子太好了，通过这个帖子，又学到了好东西
领悟需要投入