我正在做一个元素，其中包括两个不同颜色的 svg 作为导航栏中的动画图标。
它们将彼此相邻放置，现在图标通过勾勒出每个单词的字母并使用透明填充(这很棒)来制作动画 - 但结束填充需要与各自的 svg 重合，这这是我遇到减速带的地方。
我为每个 svg 指定了关键帧，但两个 svg 的完成都具有相同的颜色填充 - 这不是我的目标。附件是 CSS。
如果有人遇到这个，一些煽动会很棒!
提前致谢。
const logoOne = document.querySelectorAll('#HRlogo path');
for(let i=0; i<logoOne.length; i++){
console.log(`Letter ${i} is ${logoOne[i].getTotalLength()}`);
}
const logoTwo = document.querySelectorAll('#LRlogo path');
for(let j=0; j<logoTwo.length; j++){
console.log(`Letter ${j} is ${logoTwo[j].getTotalLength()}`);
}*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-color: #C00C00;
}
/*HRLR*/
#HRlogo{
position: absolute;
animation: fill 0.5s ease forwards 3.5s;
}
#HRlogo path:nth-child(1){
stroke-dasharray: 280.9353942871094;
stroke-dashoffset: 280.9353942871094;
animation: line-anim 2s ease forwards;
}
#HRlogo path:nth-child(2){
stroke-dasharray: 141.5399932861328;
stroke-dashoffset: 141.5399932861328;
animation: line-anim 2s ease forwards 0.3s;
}
#HRlogo path:nth-child(3){
stroke-dasharray: 273.3261413574219;
stroke-dashoffset: 273.3261413574219;
animation: line-anim 2s ease forwards 0.6s;
}
#HRlogo path:nth-child(4){
stroke-dasharray: 44.38001251220703;
stroke-dashoffset: 44.38001251220703;
animation: line-anim 2s ease forwards 0.9s;
}
#HRlogo path:nth-child(5){
stroke-dasharray: 340.57818603515625;
stroke-dashoffset: 340.57818603515625;
animation: line-anim 2s ease forwards 1.2s;
}
#HRlogo path:nth-child(6){
stroke-dasharray: 302.75201416015625;
stroke-dashoffset: 302.75201416015625;
animation: line-anim 2s ease forwards 1.5s;
}
#HRlogo path:nth-child(7){
stroke-dasharray: 273.3253173828125;
stroke-dashoffset: 273.3253173828125;
animation: line-anim 2s ease forwards 1.8s;
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
@keyframes fill{
from{
fill: transparent;
}
to{
fill: #84A59D;
}
}
#LRlogo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: fill 0.5s ease forwards 3.5s;
}
#LRlogo path:nth-child(1){
stroke-dasharray: 280.9353942871094;
stroke-dashoffset: 280.9353942871094;
animation: line-anim 2s ease forwards;
}
#LRlogo path:nth-child(2){
stroke-dasharray: 141.5399932861328;
stroke-dashoffset: 141.5399932861328;
animation: line-anim 2s ease forwards 0.3s;
}
#LRlogo path:nth-child(3){
stroke-dasharray: 273.3261413574219;
stroke-dashoffset: 273.3261413574219;
animation: line-anim 2s ease forwards 0.6s;
}
#LRlogo path:nth-child(4){
stroke-dasharray: 44.38001251220703;
stroke-dashoffset: 44.38001251220703;
animation: line-anim 2s ease forwards 0.9s;
}
#LRlogo path:nth-child(5){
stroke-dasharray: 340.57818603515625;
stroke-dashoffset: 340.57818603515625;
animation: line-anim 2s ease forwards 1.2s;
}
#LRlogo path:nth-child(6){
stroke-dasharray: 302.75201416015625;
stroke-dashoffset: 302.75201416015625;
animation: line-anim 2s ease forwards 1.5s;
}
#LRlogo path:nth-child(7){
stroke-dasharray: 273.3253173828125;
stroke-dashoffset: 273.3253173828125;
animation: line-anim 2s ease forwards 1.8s;
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
@keyframes fill{
from{
fill: transparent;
}
to{
fill: #F6BD60;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!--HRLR-->
<svg id="HRlogo" width="300" height="50" viewBox="0 0 407 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57.39 50.99H50.6V5.06999H42.34V26.28H18.05V5.06999H9.79V54H18.05V33.98H42.34V54H57.39V50.99ZM9.79 50.99V54H3V50.99H9.79Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M64.2041 50.99V5.06999H72.4641V50.99H79.2541V54H57.4141V50.99H64.2041Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M132.211 50.99V54H79.2207V50.99H96.1607C92.1007 48.9367 88.8574 45.9267 86.4307 41.96C84.0507 37.9933 82.8607 33.5133 82.8607 28.52C82.8607 21.38 85.334 15.5 90.2807 10.88C95.2274 6.21333 101.224 3.88 108.271 3.88C115.364 3.88 121.244 5.93333 125.911 10.04L121.501 16.34C119.587 14.7067 117.651 13.5867 115.691 12.98C113.777 12.3267 111.537 12 108.971 12C103.977 12 99.8007 13.4933 96.4407 16.48C93.1274 19.4667 91.4707 23.55 91.4707 28.73C91.4707 33.91 93.104 38.0867 96.3707 41.26C99.6374 44.3867 103.581 45.95 108.201 45.95C112.867 45.95 116.764 44.9467 119.891 42.94V29.5H128.151V46.23C126.424 48.1433 124.324 49.73 121.851 50.99H132.211Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M186.589 50.99H179.799V5.06999H171.539V26.28H147.249V5.06999H138.989V54H147.249V33.98H171.539V54H186.589V50.99ZM138.989 50.99V54H132.199V50.99H138.989Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M239.323 50.99V54H224.203L212.513 37.55H201.663V54H186.613V50.99H193.403V5.06999H211.603C219.07 5.06999 224.413 6.32999 227.633 8.84999C230.853 11.37 232.463 15.4067 232.463 20.96C232.463 29.0333 228.94 34.12 221.893 36.22L232.533 50.99H239.323ZM211.953 30.06C216.62 30.06 219.793 29.3367 221.473 27.89C223.153 26.4433 223.993 24.1333 223.993 20.96C223.993 17.74 223.13 15.5467 221.403 14.38C219.677 13.1667 216.597 12.56 212.163 12.56H201.663V30.06H211.953Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M296.341 50.99V54H237.541V50.99H253.571C249.744 48.7967 246.711 45.7867 244.471 41.96C242.278 38.1333 241.181 33.8633 241.181 29.15C241.181 21.9633 243.654 15.9667 248.601 11.16C253.548 6.30666 259.661 3.88 266.941 3.88C274.221 3.88 280.334 6.30666 285.281 11.16C290.228 15.9667 292.701 21.9633 292.701 29.15C292.701 33.8167 291.581 38.0867 289.341 41.96C287.148 45.8333 284.138 48.8433 280.311 50.99H296.341ZM279.191 16.62C275.878 13.1667 271.794 11.44 266.941 11.44C262.088 11.44 257.981 13.1667 254.621 16.62C251.308 20.0733 249.651 24.2733 249.651 29.22C249.651 34.12 251.308 38.2967 254.621 41.75C257.981 45.2033 262.088 46.93 266.941 46.93C271.794 46.93 275.878 45.2033 279.191 41.75C282.551 38.2967 284.231 34.12 284.231 29.22C284.231 24.2733 282.551 20.0733 279.191 16.62Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M355.06 50.99V54H339.45L334.55 42.87H310.05L305.15 54H289.54V50.99H297.66L317.89 5.06999H326.71L346.94 50.99H355.06ZM331.19 35.24L322.3 15.08L313.41 35.24H331.19Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M403.023 50.99V54H348.283V50.99H355.073V5.06999H371.873C380.647 5.06999 387.39 7.21666 392.103 11.51C396.817 15.7567 399.173 21.7533 399.173 29.5C399.173 39.9067 395.067 47.07 386.853 50.99H403.023ZM390.843 29.5C390.843 18.3 384.427 12.7 371.593 12.7H363.333V46.23H372.503C378.43 46.23 382.957 44.83 386.083 42.03C389.257 39.1833 390.843 35.0067 390.843 29.5Z" stroke="#2A9D8F" stroke-width="6" mask="url(#path-1-outside-1)"/>
</svg>
<svg id="LRlogo" width="300" height="50" viewBox="0 0 395 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.17 50.99V54H3V50.99H9.79V5.06999H18.05V46.16H40.38V50.99H47.17Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M101.448 50.99V54H42.6484V50.99H58.6784C54.8518 48.7967 51.8184 45.7867 49.5784 41.96C47.3851 38.1333 46.2884 33.8633 46.2884 29.15C46.2884 21.9633 48.7618 15.9667 53.7084 11.16C58.6551 6.30666 64.7684 3.88 72.0484 3.88C79.3284 3.88 85.4418 6.30666 90.3884 11.16C95.3351 15.9667 97.8084 21.9633 97.8084 29.15C97.8084 33.8167 96.6884 38.0867 94.4484 41.96C92.2551 45.8333 89.2451 48.8433 85.4184 50.99H101.448ZM84.2984 16.62C80.9851 13.1667 76.9018 11.44 72.0484 11.44C67.1951 11.44 63.0884 13.1667 59.7284 16.62C56.4151 20.0733 54.7584 24.2733 54.7584 29.22C54.7584 34.12 56.4151 38.2967 59.7284 41.75C63.0884 45.2033 67.1951 46.93 72.0484 46.93C76.9018 46.93 80.9851 45.2033 84.2984 41.75C87.6584 38.2967 89.3384 34.12 89.3384 29.22C89.3384 24.2733 87.6584 20.0733 84.2984 16.62Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M174.798 50.99V54H148.688L138.398 20.47H137.838L127.548 54H101.438V50.99H118.308L102.277 5.06999H111.168L123.488 40.28L134.408 5.06999H141.827L152.747 40.28L165.068 5.06999H173.958L157.928 50.99H174.798Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M227.497 50.99V54H212.377L200.687 37.55H189.837V54H174.787V50.99H181.577V5.06999H199.777C207.244 5.06999 212.587 6.32999 215.807 8.84999C219.027 11.37 220.637 15.4067 220.637 20.96C220.637 29.0333 217.114 34.12 210.067 36.22L220.707 50.99H227.497ZM200.127 30.06C204.794 30.06 207.967 29.3367 209.647 27.89C211.327 26.4433 212.167 24.1333 212.167 20.96C212.167 17.74 211.304 15.5467 209.577 14.38C207.85 13.1667 204.77 12.56 200.337 12.56H189.837V30.06H200.127Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M284.515 50.99V54H225.715V50.99H241.745C237.918 48.7967 234.885 45.7867 232.645 41.96C230.452 38.1333 229.355 33.8633 229.355 29.15C229.355 21.9633 231.828 15.9667 236.775 11.16C241.722 6.30666 247.835 3.88 255.115 3.88C262.395 3.88 268.508 6.30666 273.455 11.16C278.402 15.9667 280.875 21.9633 280.875 29.15C280.875 33.8167 279.755 38.0867 277.515 41.96C275.321 45.8333 272.312 48.8433 268.485 50.99H284.515ZM267.365 16.62C264.052 13.1667 259.968 11.44 255.115 11.44C250.262 11.44 246.155 13.1667 242.795 16.62C239.482 20.0733 237.825 24.2733 237.825 29.22C237.825 34.12 239.482 38.2967 242.795 41.75C246.155 45.2033 250.262 46.93 255.115 46.93C259.968 46.93 264.052 45.2033 267.365 41.75C270.725 38.2967 272.405 34.12 272.405 29.22C272.405 24.2733 270.725 20.0733 267.365 16.62Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M343.234 50.99V54H327.624L322.724 42.87H298.224L293.324 54H277.714V50.99H285.834L306.064 5.06999H314.884L335.114 50.99H343.234ZM319.364 35.24L310.474 15.08L301.584 35.24H319.364Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
<path d="M391.197 50.99V54H336.457V50.99H343.247V5.06999H360.047C368.82 5.06999 375.564 7.21666 380.277 11.51C384.99 15.7567 387.347 21.7533 387.347 29.5C387.347 39.9067 383.24 47.07 375.027 50.99H391.197ZM379.017 29.5C379.017 18.3 372.6 12.7 359.767 12.7H351.507V46.23H360.677C366.604 46.23 371.13 44.83 374.257 42.03C377.43 39.1833 379.017 35.0067 379.017 29.5Z" stroke="#F6BD60" stroke-width="6" mask="url(#path-1-outside-1)"/>
</svg>
<script src="script.js"></script>
</body>
</html>最佳答案
尝试为 keyframes fill 1 和 keyframes fill 2 取一个不同的名字
关键帧动画不应具有相同的名称。您已经放置了 2 个关键帧填充和 2 个关键帧线动画但具有不同的值
https://stackoverflow.com/questions/63741121/
相关文章：
amazon-web-services - 具有自定义授权方的无服务器 lambda 单元测试处理程
node.js - 在 node.js 中将字符串转换为 64 位 float
python-3.x - SendGrid 无法向 Yahoo 和 Outlook 发送列表-取消订
javascript - 是否可以使用 javascript 将整个网页静音？
java - 如何在 Java 中测试不同的 "tables input"？
post - 错误启动内核 : '_xsrf' argument missing from POST
r - 从 R 中的区间 [start, stop] 数据估计密度