如何解决在补丁上移动文本
我在某处看到过使用 Lottie 文件制作的效果(附图片)我尝试使用 Codepen 文件并对其进行编辑以重新创建它,而不是使用 Lottie 文件,因为它们很重。
但是当字符到达 SVG 补丁的端点时,它们彼此重叠,但我希望它们无限移动。任何帮助都会有用! 提前致谢
代码笔链接:
Splitting({
whitespace: true
})
@import url("https://fonts.googleapis.com/css?family=Inconsolata:700");
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: white;
}
h2 {
font-family: Inconsolata,monospace;
font-size: 1.2vw;
text-transform: uppercase;
width: 100%;
height: auto;
}
.char {
// --i: calc(50% / var(--char-total));
--offset: calc(var(--char-index) * 1rem);
offset-path: path('M83.6,128.5C31.6,195.5,283.6,380,589.9,149.5,760,333.8,760S667.6,667.6,518.2,0C234.2,144.7,49.7,83.6,128.5');
offset-distance: var(--offset);
position: absolute;
animation: move 20000ms infinite alternate forwards var(--delay,0ms);
}
h2 {
&:nth-child(2) {
color: white;
.char {
--delay: calc(var(--char-index) * 30ms);
}
}
}
@keyframes move {
100% {
// --i: 2rem;
offset-distance: calc(var(--offset) + 150rem);
}
0%
{
}
}
<script src="https://unpkg.com/splitting@1.0.6/dist/splitting.min.js"></script>
<h2 data-splitting> THE PLACEHOLDER TEXT IS JUST FOR FUN - TAKE THE LIFE EASY AND BE BRAVE - THE PLACEHOLDER TEXT IS JUST FOR FUN - </h2>
Lottie 文件的屏幕截图:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。