I have the following preloader code:
* { 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>So I basically want the output to be H instead of Z it currently displays. I tried changing the measurements in the CSS file but I would totally get a different output, and I basically want to make it so it outputs the letter H instead of Z
I also tried changing this code in the 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; } } Since this is the animation of the whole preloader, and it controls how the animation works for the particular z preloader, I tried changing some of the classes up with different measurements to see a different output than z so that I will get a better idea on how to better make it output h but I am currently stuck on that part, and would require additional help on which classes I should adjust the measurements/code of. Any suggestions?
没有评论:
发表评论