【发布时间】：2021-04-22 12:32:08
【问题描述】：
我有一个字母“Z”的 svg，我正在尝试将其作为我的网站的加载程序，并且我正在尝试对其进行动画处理，“Z”有 3 行，顶部中间和底部。我希望它们一个一个出现，就像加载程序启动时，“Z”的顶行从左侧出现，然后出现中间行，然后出现底行。我正在尝试制作动画，但如果我无限做它就无法正常工作，我也尝试过animation-delay 但对我不起作用。
这是我的代码：
/* Boilerplat - skip it */
*{box-sizing: border-box}html { box-sizing: border-box; font-size: 16px; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; }body{height: 100vh; display: flex; align-items: center}
/* Actual Code below */
.ZLogo{
margin: 0 auto;
width: 80px;
height: 80px;
padding: 12px 18px;
}
.topBar,
.bottomBar{
clip-path: inset(0px 0px 0px 0px);
animation: topBar 2s infinite;
}
.middleBar{
clip-path: inset(0px 0px 60px 0px);
animation: middleBar 2s infinite;
animation-delay: 1s;
}
.bottomBar{
clip-path: inset(0px 0px 0px 0px);
animation: bottomBar 2s infinite;
animation-delay: 2s;
}
@keyframes topBar {
0% {
clip-path: inset(0px 26px 0px 0px);
}
50% {
clip-path: inset(0px 0px 0px 0px);
}
100% {
clip-path: inset(0px 26px 0px 0px);
}
}
@keyframes middleBar {
0% {
clip-path: inset(0px 0px 0px 0px);
}
50% {
clip-path: inset(0px 0px 60px 0px);
}
100% {
clip-path: inset(0px 0px 0px 0px);
}
}
@keyframes bottomBar {
0% {
clip-path: inset(0px 26px 0px 0px);
}
50% {
clip-path: inset(0px 0px 0px 0px);
}
100% {
clip-path: inset(0px 26px 0px 0px);
}
}<svg class="ZLogo" xmlns="http://www.w3.org/2000/svg" width="40" height="56" viewBox="0 0 40 56" fill="none">
<path class="topBar" d="M0 8.90909V0H24.3536L17.9448 8.90909H0Z" fill="black"/>
<path class="middleBar" d="M41.0166 7.63636V0H32.0442L0 48.3636V56H8.97238L41.0166 7.63636Z" fill="black"/>
<path class="bottomBar" d="M17.9448 56L24.3536 48.3636H41.0166V56H17.9448Z" fill="black"/>
</svg>请帮我把它动画好，我卡住了。
【问题讨论】：
标签： html jquery css sass css-selectors