如何使用CSS或JavaScript让文字自动放大到屏幕？
How to make text automatically zoom in to the screen with CSS or JavaScript?
我正在尝试为我的投资组合网站使用 CSS 动画效果。在我的名字淡入屏幕后，我想放大特定字母，同时自动放大我的整个名字。
我用 Figma 创建了我的名字，并在 HTML 中导入了 SVG。我已经通过将 id 指定为 CSS 来尝试 ::after 函数并搜索了几个小时，但我仍然不知道如何正确地做到这一点。
我参考了不同用户的底部问答，但它仍然对我不起作用：
这是我的代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J Portfolio</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<svg id = "logo" width="380" height="53" viewBox="0 0 380 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.626 1.23438H32.2227V36.4736C32.2227 41.236 30.7871 44.9616 27.916 47.6504C25.0677 50.3392 21.2624 51.6836 16.5 51.6836C11.5553 51.6836 7.70443 50.4189 4.94727 47.8896C2.1901 45.3604 0.811523 41.8171 0.811523 37.2598H7.37402C7.37402 40.1081 8.14876 42.3298 9.69824 43.9248C11.2705 45.5199 13.5378 46.3174 16.5 46.3174C19.2116 46.3174 21.3991 45.4629 23.0625 43.7539C24.7487 42.0449 25.6032 39.6523 25.626 36.5762V1.23438Z" stroke="black"/>
<path d="M70.1279 38.0117H49.2783L44.5957 51H37.8281L56.832 1.23438H62.5742L81.6123 51H74.8789L70.1279 38.0117ZM51.2607 32.6113H68.1797L59.7031 9.33496L51.2607 32.6113Z" stroke="black"/>
<path d="M102.975 28.8174C97.3464 27.1995 93.2448 25.2171 90.6699 22.8701C88.1178 20.5003 86.8418 17.5837 86.8418 14.1201C86.8418 10.2008 88.4027 6.96517 91.5244 4.41309C94.6689 1.83822 98.7477 0.550781 103.761 0.550781C107.179 0.550781 110.221 1.21159 112.887 2.5332C115.576 3.85482 117.649 5.67773 119.107 8.00195C120.589 10.3262 121.329 12.8669 121.329 15.624H114.732C114.732 12.6162 113.775 10.2578 111.861 8.54883C109.947 6.81706 107.247 5.95117 103.761 5.95117C100.525 5.95117 97.9958 6.66895 96.1729 8.10449C94.3727 9.51725 93.4727 11.4883 93.4727 14.0176C93.4727 16.0456 94.3271 17.766 96.0361 19.1787C97.7679 20.5687 100.696 21.8447 104.82 23.0068C108.967 24.1689 112.203 25.4564 114.527 26.8691C116.874 28.2591 118.606 29.8883 119.723 31.7568C120.862 33.6253 121.432 35.8242 121.432 38.3535C121.432 42.3867 119.859 45.6224 116.715 48.0605C113.57 50.4759 109.366 51.6836 104.103 51.6836C100.685 51.6836 97.4945 51.0342 94.5322 49.7354C91.57 48.4137 89.2799 46.6136 87.6621 44.335C86.0671 42.0563 85.2695 39.4701 85.2695 36.5762H91.8662C91.8662 39.584 92.9714 41.9652 95.1816 43.7197C97.4147 45.4515 100.388 46.3174 104.103 46.3174C107.566 46.3174 110.221 45.611 112.066 44.1982C113.912 42.7855 114.835 40.86 114.835 38.4219C114.835 35.9837 113.98 34.1038 112.271 32.7822C110.562 31.4378 107.464 30.1162 102.975 28.8174Z" stroke="black"/>
<path d="M168.155 27.7236C168.155 32.5999 167.335 36.861 165.694 40.5068C164.054 44.1299 161.729 46.8984 158.722 48.8125C155.714 50.7266 152.205 51.6836 148.194 51.6836C144.275 51.6836 140.8 50.7266 137.77 48.8125C134.739 46.8757 132.381 44.1299 130.694 40.5752C129.031 36.9977 128.176 32.862 128.131 28.168V24.5791C128.131 19.7939 128.963 15.5671 130.626 11.8984C132.289 8.22982 134.636 5.42708 137.667 3.49023C140.72 1.5306 144.207 0.550781 148.126 0.550781C152.114 0.550781 155.623 1.51921 158.653 3.45605C161.707 5.37012 164.054 8.16146 165.694 11.8301C167.335 15.4759 168.155 19.7256 168.155 24.5791V27.7236ZM161.627 24.5107C161.627 18.609 160.442 14.0859 158.072 10.9414C155.702 7.77409 152.387 6.19043 148.126 6.19043C143.979 6.19043 140.709 7.77409 138.316 10.9414C135.947 14.0859 134.728 18.4609 134.659 24.0664V27.7236C134.659 33.443 135.855 37.9434 138.248 41.2246C140.663 44.4831 143.979 46.1123 148.194 46.1123C152.433 46.1123 155.714 44.5742 158.038 41.498C160.362 38.3991 161.559 33.9671 161.627 28.2021V24.5107Z" stroke="black"/>
<path d="M216.246 51H209.649L184.596 12.6504V51H177.999V1.23438H184.596L209.718 39.7549V1.23438H216.246V51Z" stroke="black"/>
<path d="M272.745 38.0117H251.896L247.213 51H240.445L259.449 1.23438H265.191L284.229 51H277.496L272.745 38.0117ZM253.878 32.6113H270.797L262.32 9.33496L253.878 32.6113Z" stroke="black"/>
<path d="M329.176 51H322.579V27.9971H297.491V51H290.929V1.23438H297.491V22.6309H322.579V1.23438H329.176V51Z" stroke="black"/>
<path d="M379.078 51H372.481L347.428 12.6504V51H340.831V1.23438H347.428L372.55 39.7549V1.23438H379.078V51Z" stroke="black"/>
</svg>
<script src = "app.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fill 0.5s ease forwards 3.5s;
}
#logo::after {
animation: textgrowth 1s infinite alternate;
}
#logo path:nth-child(1) {
stroke-dasharray: 162.4;
stroke-dashoffset: 162.4;
animation: line-anim 2s ease forwards;
}
#logo path:nth-child(2) {
stroke-dasharray: 240.7;
stroke-dashoffset: 240.7;
animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(3) {
stroke-dasharray: 259.2;
stroke-dashoffset: 259.2;
animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(4) {
stroke-dasharray: 256.3;
stroke-dashoffset: 256.3;
animation: line-anim 2s ease forwards 0.9s;
}
#logo path:nth-child(5) {
stroke-dasharray: 294.5;
stroke-dashoffset: 294.5;
animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(6) {
stroke-dasharray: 240.7;
stroke-dashoffset: 240.7;
animation: line-anim 2s ease forwards 1.5s;
}
#logo path:nth-child(7) {
stroke-dasharray: 264.8;
stroke-dashoffset: 264.8;
animation: line-anim 2s ease forwards 1.8s;
}
#logo path:nth-child(8) {
stroke-dasharray: 294.5;
stroke-dashoffset: 294.5;
animation: line-anim 2s ease forwards 2.1s;
}
@keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
@keyframes fill{
from {
fill: transparent;
}
to {
fill: black;
}
}
JS
const logo = document.querySelectorAll('#logo path');
for (let i = 0; i < logo.length; i++) {
console.log(`Letter ${i} is ${logo[i].getTotalLength()}`);
}
只需将 svg 标签的高度和宽度更改为 auto
<svg id = "logo" width="auto" height="auto" viewBox="0 0 380 53" fill="none" xmlns="http://www.w3.org/2000/svg">
我正在尝试为我的投资组合网站使用 CSS 动画效果。在我的名字淡入屏幕后，我想放大特定字母，同时自动放大我的整个名字。
我用 Figma 创建了我的名字，并在 HTML 中导入了 SVG。我已经通过将 id 指定为 CSS 来尝试 ::after 函数并搜索了几个小时，但我仍然不知道如何正确地做到这一点。
我参考了不同用户的底部问答，但它仍然对我不起作用：
这是我的代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J Portfolio</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<svg id = "logo" width="380" height="53" viewBox="0 0 380 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.626 1.23438H32.2227V36.4736C32.2227 41.236 30.7871 44.9616 27.916 47.6504C25.0677 50.3392 21.2624 51.6836 16.5 51.6836C11.5553 51.6836 7.70443 50.4189 4.94727 47.8896C2.1901 45.3604 0.811523 41.8171 0.811523 37.2598H7.37402C7.37402 40.1081 8.14876 42.3298 9.69824 43.9248C11.2705 45.5199 13.5378 46.3174 16.5 46.3174C19.2116 46.3174 21.3991 45.4629 23.0625 43.7539C24.7487 42.0449 25.6032 39.6523 25.626 36.5762V1.23438Z" stroke="black"/>
<path d="M70.1279 38.0117H49.2783L44.5957 51H37.8281L56.832 1.23438H62.5742L81.6123 51H74.8789L70.1279 38.0117ZM51.2607 32.6113H68.1797L59.7031 9.33496L51.2607 32.6113Z" stroke="black"/>
<path d="M102.975 28.8174C97.3464 27.1995 93.2448 25.2171 90.6699 22.8701C88.1178 20.5003 86.8418 17.5837 86.8418 14.1201C86.8418 10.2008 88.4027 6.96517 91.5244 4.41309C94.6689 1.83822 98.7477 0.550781 103.761 0.550781C107.179 0.550781 110.221 1.21159 112.887 2.5332C115.576 3.85482 117.649 5.67773 119.107 8.00195C120.589 10.3262 121.329 12.8669 121.329 15.624H114.732C114.732 12.6162 113.775 10.2578 111.861 8.54883C109.947 6.81706 107.247 5.95117 103.761 5.95117C100.525 5.95117 97.9958 6.66895 96.1729 8.10449C94.3727 9.51725 93.4727 11.4883 93.4727 14.0176C93.4727 16.0456 94.3271 17.766 96.0361 19.1787C97.7679 20.5687 100.696 21.8447 104.82 23.0068C108.967 24.1689 112.203 25.4564 114.527 26.8691C116.874 28.2591 118.606 29.8883 119.723 31.7568C120.862 33.6253 121.432 35.8242 121.432 38.3535C121.432 42.3867 119.859 45.6224 116.715 48.0605C113.57 50.4759 109.366 51.6836 104.103 51.6836C100.685 51.6836 97.4945 51.0342 94.5322 49.7354C91.57 48.4137 89.2799 46.6136 87.6621 44.335C86.0671 42.0563 85.2695 39.4701 85.2695 36.5762H91.8662C91.8662 39.584 92.9714 41.9652 95.1816 43.7197C97.4147 45.4515 100.388 46.3174 104.103 46.3174C107.566 46.3174 110.221 45.611 112.066 44.1982C113.912 42.7855 114.835 40.86 114.835 38.4219C114.835 35.9837 113.98 34.1038 112.271 32.7822C110.562 31.4378 107.464 30.1162 102.975 28.8174Z" stroke="black"/>
<path d="M168.155 27.7236C168.155 32.5999 167.335 36.861 165.694 40.5068C164.054 44.1299 161.729 46.8984 158.722 48.8125C155.714 50.7266 152.205 51.6836 148.194 51.6836C144.275 51.6836 140.8 50.7266 137.77 48.8125C134.739 46.8757 132.381 44.1299 130.694 40.5752C129.031 36.9977 128.176 32.862 128.131 28.168V24.5791C128.131 19.7939 128.963 15.5671 130.626 11.8984C132.289 8.22982 134.636 5.42708 137.667 3.49023C140.72 1.5306 144.207 0.550781 148.126 0.550781C152.114 0.550781 155.623 1.51921 158.653 3.45605C161.707 5.37012 164.054 8.16146 165.694 11.8301C167.335 15.4759 168.155 19.7256 168.155 24.5791V27.7236ZM161.627 24.5107C161.627 18.609 160.442 14.0859 158.072 10.9414C155.702 7.77409 152.387 6.19043 148.126 6.19043C143.979 6.19043 140.709 7.77409 138.316 10.9414C135.947 14.0859 134.728 18.4609 134.659 24.0664V27.7236C134.659 33.443 135.855 37.9434 138.248 41.2246C140.663 44.4831 143.979 46.1123 148.194 46.1123C152.433 46.1123 155.714 44.5742 158.038 41.498C160.362 38.3991 161.559 33.9671 161.627 28.2021V24.5107Z" stroke="black"/>
<path d="M216.246 51H209.649L184.596 12.6504V51H177.999V1.23438H184.596L209.718 39.7549V1.23438H216.246V51Z" stroke="black"/>
<path d="M272.745 38.0117H251.896L247.213 51H240.445L259.449 1.23438H265.191L284.229 51H277.496L272.745 38.0117ZM253.878 32.6113H270.797L262.32 9.33496L253.878 32.6113Z" stroke="black"/>
<path d="M329.176 51H322.579V27.9971H297.491V51H290.929V1.23438H297.491V22.6309H322.579V1.23438H329.176V51Z" stroke="black"/>
<path d="M379.078 51H372.481L347.428 12.6504V51H340.831V1.23438H347.428L372.55 39.7549V1.23438H379.078V51Z" stroke="black"/>
</svg>
<script src = "app.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fill 0.5s ease forwards 3.5s;
}
#logo::after {
animation: textgrowth 1s infinite alternate;
}
#logo path:nth-child(1) {
stroke-dasharray: 162.4;
stroke-dashoffset: 162.4;
animation: line-anim 2s ease forwards;
}
#logo path:nth-child(2) {
stroke-dasharray: 240.7;
stroke-dashoffset: 240.7;
animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(3) {
stroke-dasharray: 259.2;
stroke-dashoffset: 259.2;
animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(4) {
stroke-dasharray: 256.3;
stroke-dashoffset: 256.3;
animation: line-anim 2s ease forwards 0.9s;
}
#logo path:nth-child(5) {
stroke-dasharray: 294.5;
stroke-dashoffset: 294.5;
animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(6) {
stroke-dasharray: 240.7;
stroke-dashoffset: 240.7;
animation: line-anim 2s ease forwards 1.5s;
}
#logo path:nth-child(7) {
stroke-dasharray: 264.8;
stroke-dashoffset: 264.8;
animation: line-anim 2s ease forwards 1.8s;
}
#logo path:nth-child(8) {
stroke-dasharray: 294.5;
stroke-dashoffset: 294.5;
animation: line-anim 2s ease forwards 2.1s;
}
@keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
@keyframes fill{
from {
fill: transparent;
}
to {
fill: black;
}
}
JS
const logo = document.querySelectorAll('#logo path');
for (let i = 0; i < logo.length; i++) {
console.log(`Letter ${i} is ${logo[i].getTotalLength()}`);
}
只需将 svg 标签的高度和宽度更改为 auto
<svg id = "logo" width="auto" height="auto" viewBox="0 0 380 53" fill="none" xmlns="http://www.w3.org/2000/svg">