首页 / 技术问答 / Html问答列表 / 问答详情

制作 HTML SVG 启动画面时遇到问题

我正试图为我的应用程序创建一个动画闪屏，由于应用程序的架构，我必须使用SVG、HTML和CSS来完成这项工作.

first GIF是我正在努力实现的设计产品，second GIF是我已经能够做到的.

我需要帮助来try 创建圆圈效果(我已经try 使用<circle>，但我不能让它做正确的效果.我还需要对文本进行放大/缩小，并使背景 colored颜色 覆盖整个屏幕.

这是我所拥有的:

@keyframes fill {
  0% {
    fill: white;
  }
  50% {
    fill: black;
  }
  100% {
    fill: white;
  }
}

#jazztel {
  fill: white;
  animation-name: fill;
  animation-duration: 5s;
}

@keyframes colorChange {
  0% {
    fill: #da1884;
  }
  50% {
    fill: #ffffff;
  }
  100% {
    fill: #ffcd00;
  }
}

.box {
  fill: #ffcd00;
  width: 100%;
  height: 100%;
  animation: colorChange 5s;
}

@keyframes buttonTransition {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
    visibility: none;
    opacity: 0;
    display: none;
  }
  100% {
    transform: scale(0);
  }
}

.innerCircle {
  animation-duration: 3s;
  animation-name: buttonTransition;
  transform-origin: center center;
}
<svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect class="box" />
    <!--<circle class="innerCircle" cx="50%" cy="50%" r="50%" fill="#FFFFFF" />-->
    <path id="jazztel" d="M596.912 674.306V665.289H578.926L598.296 631.994H565.437V641.011H581.693L562.669 674.306H596.912Z" />
    <path id="jazztel" d="M670.931 653.497C670.931 646.561 668.856 641.012 664.705 636.503C660.554 632.341 655.02 629.913 648.448 629.913C641.877 629.913 636.688 631.994 632.538 636.503C628.387 640.665 626.312 646.214 626.312 652.803C626.312 659.393 628.387 664.595 632.884 668.757C637.034 672.919 642.568 675 649.14 675C657.442 675 664.013 671.879 668.164 665.636L659.171 661.474C656.404 664.249 652.945 665.636 648.794 665.636C645.681 665.636 642.914 664.942 640.839 663.208C638.764 661.474 637.38 659.046 636.688 655.925H670.931V653.497ZM637.034 646.908C638.072 644.133 639.455 642.399 640.839 641.358C642.914 639.624 645.681 638.931 648.794 638.931C651.561 638.931 653.637 639.624 655.712 641.012C657.787 642.399 659.171 644.48 659.863 646.908H637.034Z" />
    <path id="jazztel" d="M687.534 615H676.811V673.96H687.534V615Z" />
    <path id="jazztel" d="M528.081 631.994V641.011H544.683L525.314 674.306H559.902V665.289H541.57L560.94 631.994H528.081Z" />
    <path id="jazztel" d="M519.433 648.295C519.087 646.908 518.741 645.52 518.05 644.133C516.666 641.359 515.283 638.931 513.207 636.85C511.132 634.769 508.711 633.035 505.944 631.994C504.56 631.301 503.177 630.954 501.793 630.607C500.409 630.26 499.026 630.26 497.296 630.26C494.183 630.26 491.416 630.954 488.995 631.994C487.612 632.688 486.574 633.382 485.536 634.075C484.499 634.769 483.461 635.81 482.423 636.85C481.386 637.89 480.694 638.931 480.002 640.318C478.619 641.705 477.927 642.746 477.581 644.133C476.889 645.52 476.543 646.908 476.197 648.295C475.852 649.682 475.852 651.416 475.852 652.804C475.852 655.925 476.543 658.7 477.581 661.127C478.273 662.515 478.965 663.555 479.656 664.596C480.348 665.636 481.386 666.677 482.077 667.717C483.115 668.758 484.153 669.451 485.19 670.492C486.228 671.185 487.612 671.879 488.649 672.573C491.071 673.613 493.838 674.307 496.605 674.307H519.779V652.804C519.779 651.416 519.433 650.029 519.433 648.295ZM509.748 664.249H497.296C495.913 664.249 494.529 663.902 493.146 663.208C492.454 662.862 491.762 662.515 491.416 662.168C490.725 661.821 490.379 661.127 489.687 660.781C489.341 660.087 488.649 659.74 488.303 659.047C487.958 658.353 487.612 657.659 487.266 656.966C486.574 655.578 486.228 654.191 486.228 652.457C486.228 651.763 486.228 650.723 486.574 650.029C486.574 649.336 486.92 648.642 487.266 647.948C487.612 647.255 487.958 646.561 488.303 645.867C488.649 645.174 488.995 644.827 489.687 644.133C490.379 643.44 490.725 643.093 491.416 642.746C492.108 642.399 492.8 642.052 493.146 641.705C494.529 641.012 496.259 640.665 497.642 640.665C498.334 640.665 499.372 640.665 500.064 641.012C500.755 641.012 501.447 641.359 502.139 641.705C503.522 642.399 504.906 643.093 505.944 644.48C506.981 645.521 508.019 646.908 508.711 648.295C509.057 648.989 509.402 649.682 509.402 650.376C509.402 651.07 509.748 652.11 509.748 652.804V664.249Z" />
    <path id="jazztel" d="M469.972 615.693H458.903V655.924C458.903 655.924 458.903 659.739 458.557 660.78C458.212 662.861 457.174 663.901 455.444 663.901C453.023 663.901 450.256 662.167 447.489 658.699L439.534 666.676C444.03 672.225 449.564 675 455.79 675C458.903 675 461.67 674.306 463.746 672.919C466.513 671.185 468.242 668.41 469.28 664.595C469.626 662.514 469.972 659.046 469.972 654.19V615.693Z" />
    <path id="jazztel" d="M616.281 631.647V615.693H605.559V638.93L605.213 640.664H605.559V674.306H616.281V640.664H622.507V631.647H616.281Z" />
</svg>

推荐答案

我已经设法解决了我所有的问题，下面你可以找到工作版本的片段.

我删除了<rect>标记，创建了一个<div>来包装SVG，并在其中添加了一个背景，以解决背景不会填满整个屏幕的问题.

为了解决文本的zoom 问题，我所做的是在上面提到的同一个div上实现了transform: scale(x)，而不是文本，这是几个路径(如果应用到路径上，它将不会正确地产生效果).所以不是放大和缩小文本，效果就像我手中有一幅画，我把它靠近你的脸.

最后是<circle>效应.我删除了HTML标记中的背景色，并将其添加到了css中的@keyframes中.

@keyframes textColorChange {
        0% {
            fill: white;

        }
        50% {
            fill: black;

        }
        100% {
            fill: white;

        }
    }

    #jazztel {
        fill: white;
        animation-name: textColorChange;
        animation-duration: 5s;
    }

    @keyframes bgColorChange {
        0% {
            background-color: #da1884;
            transform: scale(1);
        }
        50% {
            background-color: #ffffff;
            transform: scale(1.5);
        }
        100% {
            background-color: #ffcd00;
            transform: scale(1);
        }
    }

    .splashBackground {
        background-color: #ffcd00;
        width: 100%;
        height: 100%;
        animation: bgColorChange 5s;
    }

    @keyframes circleTransition {
        0% {
            transform: scale(0);
            fill: #FFFFFF;
        }
        50% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }

    .innerCircle {
        animation-duration: 3s;
        animation-name: circleTransition;
        transform-origin: center center;
    }
<div class="splashBackground">
    <svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle class="innerCircle" cx="50%" cy="50%" r="50%" />
        <path id="jazztel" d="M596.912 674.306V665.289H578.926L598.296 631.994H565.437V641.011H581.693L562.669 674.306H596.912Z" />
        <path id="jazztel" d="M670.931 653.497C670.931 646.561 668.856 641.012 664.705 636.503C660.554 632.341 655.02 629.913 648.448 629.913C641.877 629.913 636.688 631.994 632.538 636.503C628.387 640.665 626.312 646.214 626.312 652.803C626.312 659.393 628.387 664.595 632.884 668.757C637.034 672.919 642.568 675 649.14 675C657.442 675 664.013 671.879 668.164 665.636L659.171 661.474C656.404 664.249 652.945 665.636 648.794 665.636C645.681 665.636 642.914 664.942 640.839 663.208C638.764 661.474 637.38 659.046 636.688 655.925H670.931V653.497ZM637.034 646.908C638.072 644.133 639.455 642.399 640.839 641.358C642.914 639.624 645.681 638.931 648.794 638.931C651.561 638.931 653.637 639.624 655.712 641.012C657.787 642.399 659.171 644.48 659.863 646.908H637.034Z" />
        <path id="jazztel" d="M687.534 615H676.811V673.96H687.534V615Z" />
        <path id="jazztel" d="M528.081 631.994V641.011H544.683L525.314 674.306H559.902V665.289H541.57L560.94 631.994H528.081Z" />
        <path id="jazztel" d="M519.433 648.295C519.087 646.908 518.741 645.52 518.05 644.133C516.666 641.359 515.283 638.931 513.207 636.85C511.132 634.769 508.711 633.035 505.944 631.994C504.56 631.301 503.177 630.954 501.793 630.607C500.409 630.26 499.026 630.26 497.296 630.26C494.183 630.26 491.416 630.954 488.995 631.994C487.612 632.688 486.574 633.382 485.536 634.075C484.499 634.769 483.461 635.81 482.423 636.85C481.386 637.89 480.694 638.931 480.002 640.318C478.619 641.705 477.927 642.746 477.581 644.133C476.889 645.52 476.543 646.908 476.197 648.295C475.852 649.682 475.852 651.416 475.852 652.804C475.852 655.925 476.543 658.7 477.581 661.127C478.273 662.515 478.965 663.555 479.656 664.596C480.348 665.636 481.386 666.677 482.077 667.717C483.115 668.758 484.153 669.451 485.19 670.492C486.228 671.185 487.612 671.879 488.649 672.573C491.071 673.613 493.838 674.307 496.605 674.307H519.779V652.804C519.779 651.416 519.433 650.029 519.433 648.295ZM509.748 664.249H497.296C495.913 664.249 494.529 663.902 493.146 663.208C492.454 662.862 491.762 662.515 491.416 662.168C490.725 661.821 490.379 661.127 489.687 660.781C489.341 660.087 488.649 659.74 488.303 659.047C487.958 658.353 487.612 657.659 487.266 656.966C486.574 655.578 486.228 654.191 486.228 652.457C486.228 651.763 486.228 650.723 486.574 650.029C486.574 649.336 486.92 648.642 487.266 647.948C487.612 647.255 487.958 646.561 488.303 645.867C488.649 645.174 488.995 644.827 489.687 644.133C490.379 643.44 490.725 643.093 491.416 642.746C492.108 642.399 492.8 642.052 493.146 641.705C494.529 641.012 496.259 640.665 497.642 640.665C498.334 640.665 499.372 640.665 500.064 641.012C500.755 641.012 501.447 641.359 502.139 641.705C503.522 642.399 504.906 643.093 505.944 644.48C506.981 645.521 508.019 646.908 508.711 648.295C509.057 648.989 509.402 649.682 509.402 650.376C509.402 651.07 509.748 652.11 509.748 652.804V664.249Z" />
        <path id="jazztel" d="M469.972 615.693H458.903V655.924C458.903 655.924 458.903 659.739 458.557 660.78C458.212 662.861 457.174 663.901 455.444 663.901C453.023 663.901 450.256 662.167 447.489 658.699L439.534 666.676C444.03 672.225 449.564 675 455.79 675C458.903 675 461.67 674.306 463.746 672.919C466.513 671.185 468.242 668.41 469.28 664.595C469.626 662.514 469.972 659.046 469.972 654.19V615.693Z" />
        <path id="jazztel" d="M616.281 631.647V615.693H605.559V638.93L605.213 640.664H605.559V674.306H616.281V640.664H622.507V631.647H616.281Z" />
    </svg>
</div>

https://jsfiddle.net/ty6qwcnm/个

Html相关问答推荐

如何在水平对齐(居中)元素的右侧创建迪夫.在tailwind 或CSS中

如何格式化HTML文本，使其环绕关键字

如何使用bslb设置可导航页面侧边栏的样式

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

垂直页眉，每行只显示一个使用css的字母

如何在用css使用网格视图时设置宽度？

天使17：令人惊叹的动画

与窗高匹配的响应式正方形网格

如何将tmap按钮和图例更改为位于页脚后面？

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

如何为高度较小的块制作边框动画？

如何使粘性导航栏能够跨其他组件工作？

R 中的网页抓取数字？

为什么即使我点击其他地方，我的 contenteditable="true" 也会被激活？

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

如何将图像移动到父容器的右侧？

我无法设置使用 Tailwind CSS 创建的仪表板的网格 struct

在中心而不是边界处填充 svg 的背景

svg 内容超过元素

我正在try 向我预先存在的导航栏添加响应式汉堡包导航，但由于某种原因它没有显示

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630