我有以下预加载程序代码:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');
.container {
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
background-color: #21252B;
/* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
}
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: #89C9B8;
}
.svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 3s linear infinite;
}
svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #89C9B8;
}
/* .svg-file h2 span:nth-child(1) {
animation: fadein-fadeout 1s infinite;
} */
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: #89C9B8;
width: 8px;
height: 5px;
}
/* .svg-file h2 span:nth-last-child(1) {
animation: fadein-fadeout 2s infinite;
} */
@keyframes dots {
0%,
20% {
background-color: rgb(191, 224, 215, .08);
box-shadow:
.25em 0 0 rgba(191, 224, 215, .08),
.5em 0 0 rgba(191, 224, 215, .08);
}
40% {
background-color: #89C9B8;
box-shadow:
.25em 0 0 rgba(191, 224, 215, .08),
.5em 0 0 rgba(191, 224, 215, .08);
}
60% {
box-shadow:
.25em 0 0 #89C9B8,
.5em 0 0 rgba(191, 224, 215, .08);
}
80%,
100% {
box-shadow:
.25em 0 0 #89C9B8,
.5em 0 0 #89C9B8;
}
}
@keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes animate-zlogo {
0% {
stroke-dashoffset: 0;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #89C9B8;
}
80% {
stroke-width: 0;
fill: #89C9B8;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
/* @keyframes animate-zlogo {
0% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: 550;
fill: transparent;
}
60% {
fill: transparent;
stroke-dashoffset: 1100;
}
80% {
stroke-dashoffset: 1100;
fill: #89C9B8;
}
100% {
stroke-width: 0;
fill: #89C9B8;
}
} */<div class="container">
<div class="svg-file z-logo">
<svg width="133" height="119" viewBox="-1 -5 150 119" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M37.5 7.5L26.25 41.25L71.6667 37.5L0 118.75L100.417 112.083L113.75 75L82.5 76.6667L132.083 0L37.5 7.5Z"
fill="#47AF9A" />
</svg>
<span></span>
</div>
</div>所以我基本上希望输出是H而不是当前显示的Z。我试着改变CSS文件中的测量值，但我会得到完全不同的输出，我基本上想让它输出字母H而不是Z
我也试过修改css中的代码:
@keyframes animate-zlogo {
0% {
stroke-dashoffset: 0;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #89C9B8;
}
80% {
stroke-width: 0;
fill: #89C9B8;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
因为这是整个预加载器的动画，它控制动画如何为特定的z预加载器工作，我尝试改变一些类与不同的测量，看到不同的输出比z，这样我就会得到一个更好的想法，如何更好地使它输出h，但我目前被困在那部分，并需要额外的帮助，我应该调整测量/代码的类。有什么建议吗?
您需要在SVG代码中进行如下更改:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');
.container {
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
background-color: #21252B;
/* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
}
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: #89C9B8;
}
.svg-file.z-logo path {
stroke-dasharray: 695;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 3s linear infinite;
}
svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #89C9B8;
}
/* .svg-file h2 span:nth-child(1) {
animation: fadein-fadeout 1s infinite;
} */
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: #89C9B8;
width: 8px;
height: 5px;
}
/* .svg-file h2 span:nth-last-child(1) {
animation: fadein-fadeout 2s infinite;
} */
@keyframes dots {
0%,
20% {
background-color: rgb(191, 224, 215, .08);
box-shadow:
.25em 0 0 rgba(191, 224, 215, .08),
.5em 0 0 rgba(191, 224, 215, .08);
}
40% {
background-color: #89C9B8;
box-shadow:
.25em 0 0 rgba(191, 224, 215, .08),
.5em 0 0 rgba(191, 224, 215, .08);
}
60% {
box-shadow:
.25em 0 0 #89C9B8,
.5em 0 0 rgba(191, 224, 215, .08);
}
80%,
100% {
box-shadow:
.25em 0 0 #89C9B8,
.5em 0 0 #89C9B8;
}
}
@keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #89C9B8;
}
80% {
stroke-width: 0;
fill: #89C9B8;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
/* @keyframes animate-zlogo {
0% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: 550;
fill: transparent;
}
60% {
fill: transparent;
stroke-dashoffset: 1100;
}
80% {
stroke-dashoffset: 1100;
fill: #89C9B8;
}
100% {
stroke-width: 0;
fill: #89C9B8;
}
} */<div class="container">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
<span></span>
</div>
</div>