我被这段代码困了好几天。我有一个没有响应的文本动画。这个HTML代码是在网页上设置一个文本动画。首先从Google Fonts中导入Montserrat字体，然后为body元素设置一些基本样式。
接下来，它定义了一个名为"text-animation_001"这将用于样式的文本，将被动画。它设置元素的字体系列、字体粗细、填充、字体大小和背景颜色。它还将宽度设置为100%，以便它占用其父容器的整个宽度。
<text-animation_001"类，还有一个类叫"句子"。它将用于包含文本的单个字母。这个类被设置为将字母排成一行，向左对齐，字母的底部与容器的底部对齐。>
文本的每个字母都包含在一个"span"元素，并赋予它们一些初始样式，使它们不可见并从它们的最终位置偏移。"transition"属性用于指定字母在显示时应平滑地动画到其最终样式。
在样式块的末尾也有一些媒体查询，用于调整文本及其容器的大小以适应较小的屏幕尺寸。
最后，在HTML文件的底部有一个脚本，该脚本通过将文本拆分为单个字母，为每个字母创建元素并将它们添加到页面中来设置动画。它还为主要字母(将首先显示)和金色字母(将具有不同的颜色)设置了一些变量。然后，它使用一个循环逐个显示字母，每个字母之间有一个延迟。
它对笔记本电脑，平板电脑有响应，但对移动设备没有响应。我将分享下面的代码:'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
body {
margin: 0;
}
.text-animation_001 {
font-family: Montserrat, sans-serif;
font-weight: 600;
padding: 10px;
font-size:40px;
background-color: #000ffff;
width: 100%;
}
.text-animation_001 .sentence {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-end;
}
.text-animation_001 .sentence span {
opacity: 0;
transition: all 0.1s ease-in;
transform: translateY(-20px);
color: #dadada;
max-width: 50px;
}
.text-animation_001 .sentence span:nth-child(15),
.text-animation_001 .sentence span:nth-child(22),
.text-animation_001 .sentence span:nth-child(29) {
color: #d8ae5a;
}
.text-animation_001 .sentence span:nth-child(14) {
font-size: 50px;
}
.text-animation_001 .sentence span:nth-child(7),
.text-animation_001 .sentence span:nth-child(10),
.text-animation_001 .sentence span:nth-child(14),
.text-animation_001 .sentence span:nth-child(18),
/* .text-animation_001 .sentence span:nth-child(21), */
.text-animation_001 .sentence span:nth-child(27) {
letter-spacing: 10px;
}
@media screen and (max-width: 768px) {
.sentence, .text-animation_001,.text-animation_001 .sentence{
transform: scale(.8);
transform-origin:left center;
}
}
@media screen and (max-width: 600px) {
.sentence,.text-animation_001 .sentence,.text-animation_001 {
transform: scale(0.6);
transform-origin:left center;
}
}
@media screen and (max-width: 480px) {
.sentence ,.text-animation_001 .sentence,.text-animation_001{
transform: scale(0.69);
overflow: hidden
transform-origin:left center;
}
</style>
</head>
<body>
<div class="main">
<div class="text-animation_001">
<div class="sentence"></div>
</div>
<script>
const animation_sentence = "Welcome to Dr.Paye AlMeeran Centre";
const animation_letters = animation_sentence.split("");
const animation_primaryLeters = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 22, 29,
];
const animation_goldenLeters = [15, 22, 29];
const animation_textEl = document.querySelector(
".text-animation_001 .sentence"
);
animation_letters.forEach((letter) => {
animation_textEl.innerHTML += `<span>${letter}</span>`;
});
const animation_lettersEls = document.querySelectorAll(
".text-animation_001 .sentence span"
);
const animationIteration = () => {
animation_lettersEls.forEach((letter, index) => {
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform = `translateY(0px)`;
letter.style.opacity = 1;
}, index * 40);
setTimeout(() => {
letter.style.transitionDuration = "0.5s";
if (!animation_primaryLeters.includes(index + 1)) {
letter.style.opacity = 0;
letter.style.transform = `scale(0.5) rotate(-15deg)`;
letter.style.maxWidth = 0;
}
if (animation_goldenLeters.includes(index + 1)) {
letter.style.fontSize = `50px`;
}
}, 5000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.opacity = 0;
}, 10000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform =
"translateY(-20px) scale(1) rotate(0deg)";
letter.style.maxWidth = "50px";
if (index === 13) letter.style.fontSize = `50px`;
else letter.style.fontSize = `40px`;
}, 10500);
});
};
animationIteration();
setInterval(animationIteration, 11000);
</script>
</div>
</body>
</html>
I tried to give transform scale property but the font got again smaller only.It didnt become responsive.
i add:flex-flow: wrap;in.text-animation_001 .sentence行号29现在，如果你想的话，你可以在CSS中删除缩放。让我知道这是否适合你
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
body {
margin: 0;
}
.text-animation_001 {
font-family: Montserrat, sans-serif;
font-weight: 600;
padding: 10px;
font-size:40px;
background-color: #000ffff;
width: 100%;
}
.text-animation_001 .sentence {
display: flex;
flex-direction: row;
justify-content: left;
align-items: flex-end;
flex-flow: wrap;
}
.text-animation_001 .sentence span {
opacity: 0;
transition: all 0.1s ease-in;
transform: translateY(-20px);
color: #dadada;
max-width: 50px;
}
.text-animation_001 .sentence span:nth-child(15),
.text-animation_001 .sentence span:nth-child(22),
.text-animation_001 .sentence span:nth-child(29) {
color: #d8ae5a;
}
.text-animation_001 .sentence span:nth-child(14) {
font-size: 50px;
}
.text-animation_001 .sentence span:nth-child(7),
.text-animation_001 .sentence span:nth-child(10),
.text-animation_001 .sentence span:nth-child(14),
.text-animation_001 .sentence span:nth-child(18),
/* .text-animation_001 .sentence span:nth-child(21), */
.text-animation_001 .sentence span:nth-child(27) {
letter-spacing: 10px;
}
@media screen and (max-width: 768px) {
.sentence, .text-animation_001,.text-animation_001 .sentence{
transform: scale(.8);
transform-origin:left center;
}
}
@media screen and (max-width: 600px) {
.sentence,.text-animation_001 .sentence,.text-animation_001 {
transform: scale(0.6);
transform-origin:left center;
}
}
@media screen and (max-width: 480px) {
.sentence ,.text-animation_001 .sentence,.text-animation_001{
transform: scale(0.69);
overflow: hidden
transform-origin:left center;
}
</style>
</head>
<body>
<div class="main">
<div class="text-animation_001">
<div class="sentence"></div>
</div>
<script>
const animation_sentence = "Welcome to Dr.Paye AlMeeran Centre";
const animation_letters = animation_sentence.split("");
const animation_primaryLeters = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 22, 29,
];
const animation_goldenLeters = [15, 22, 29];
const animation_textEl = document.querySelector(
".text-animation_001 .sentence"
);
animation_letters.forEach((letter) => {
animation_textEl.innerHTML += `<span>${letter}</span>`;
});
const animation_lettersEls = document.querySelectorAll(
".text-animation_001 .sentence span"
);
const animationIteration = () => {
animation_lettersEls.forEach((letter, index) => {
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform = `translateY(0px)`;
letter.style.opacity = 1;
}, index * 40);
setTimeout(() => {
letter.style.transitionDuration = "0.5s";
if (!animation_primaryLeters.includes(index + 1)) {
letter.style.opacity = 0;
letter.style.transform = `scale(0.5) rotate(-15deg)`;
letter.style.maxWidth = 0;
}
if (animation_goldenLeters.includes(index + 1)) {
letter.style.fontSize = `50px`;
}
}, 5000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.opacity = 0;
}, 10000);
setTimeout(() => {
letter.style.transitionDuration = "0.1s";
letter.style.transform =
"translateY(-20px) scale(1) rotate(0deg)";
letter.style.maxWidth = "50px";
if (index === 13) letter.style.fontSize = `50px`;
else letter.style.fontSize = `40px`;
}, 10500);
});
};
animationIteration();
setInterval(animationIteration, 11000);
</script>
</div>
</body>
</html>