我被这个代码困了好几天。我有一个没有响应的文本动画。这个HTML代码正在网页上设置一个文本动画。它首先从Google字体导入Montserrat字体，然后为body元素设置一些基本样式。
接下来，它定义了一个名为“text-animation_001”的类，用于设置要动画的文本的样式，为元素设置字体系列、字体粗细、填充、字体大小和背景颜色，还将宽度设置为100%，以便它占据其父容器的整个宽度。
在“text-animation_001”类中，还有一个名为“sentence”的类，用于包含文本的各个字母。该类被设置为将字母显示为一行，左对齐，字母的底部与容器的底部对齐。
文本中的每个字母都包含在一个“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.
1条答案
按热度按时间mklgxw1f1#
我添加了：
flex-flow: wrap;在.text-animation_001 .sentence中第29行现在你可以删除CSS中的比例，如果你愿意的话。让我知道这是否适合你