请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本例,在 css-doodle 中让每一个文本个体所在的单元格通过 offset-distance 设置自己在 offset-path 路径上的位置,具体定位算法在 css-doodle 代码中使用 CSS 的 calc 函数完成:
<css-doodle grid="10x1">
:doodle {
@size: 400px 200px;
border: 1px solid rebeccapurple;
}
@size: 40px;
@place: 20px 20px;
background: rebeccapurple;
border-radius: 50%;
color: #fff;
: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: 0deg;
</css-doodle>
|