请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
文字在椭圆路径上绕圈运动,在按椭圆路径布局的基础上加以简单改造即可:让每一个文本所在的单元格在各自的位置 + 100% 的地方上起步,然后回到各自的位置,这是顺时针运动,需要反时针的将起步和终点调换过来即可。
<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: 0deg;
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>
文字在运动的时候有些抖动,原因是 offset-rotate 的设置,设置为 auto 时抖动现象消失,大家可以试试看。
|