修改预加载器以输出不同的字母

Question

我有以下预加载器代码：

* {
    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 但我目前停留在那个部分，并且需要额外的帮助类我应该调整measurements/code的。有什么建议吗？

Answer 1

您需要像下面这样更改 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>

修改预加载器以输出不同的字母

Modifying The Preloader To Output A Different Letter

html

javascript

css

web-deployment

web