因此,我尝试使用一个句子来对某些单词进行动画处理(旋转)-我以为它可以正常工作,但是一旦我在手机上查看了该网站,便发现了一个问题。 在桌面上(甚至在开发工具中)查看时,动画文本将以正确的大小呈现。但是,一旦我在移动设备(iPhone)上查看它,文本就会变得很小
我还在页面上使用了引导程序,所以我认为可能是某些内容被覆盖了。但是正如您所看到的,我基本上已经删除了所有的引导类,但仍然无法正常工作。
.animated span {
color: #007bff;
font-size: 0;
opacity: 0;
-ms-animation: topToBottom 10s infinite;
-webkit-animation: topToBottom 10s infinite;
animation: topToBottom 10s infinite;
}
.animated span:nth-child(2) {
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(3) {
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated span:nth-child(4) {
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animated span:nth-child(5) {
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
@-webkit-keyframes topToBottom {
0%,
20% {
font-size: 2.5rem;
opacity: 1;
}
/* visible for 1s */
20.01%,
100% {
opacity: 0;
font-size: 0rem;
}
<h1 class=" cover-heading animated">TribePulse replaces <br />
<span>status updates</span>
<span>engagement surveys</span>
<span>progress reports</span>
<span>status meetings</span>
<span>EoD emails</span>
</h1>
小故障演示:https://empty-cemetery.glitch.me/ 在桌面上查看时,所有蓝色文字均为正确大小。但是,一旦在移动设备上查看,动画文本就会变得很小。
任何帮助将不胜感激!几个小时以来一直在尝试解决此问题,只是不知道我还能尝试什么。
答案 0 :(得分:1)
您可以检查网页在移动设备上的外观和效果:
https://developers.google.com/web/tools/chrome-devtools/device-mode/
您还可以使用媒体查询来自定义内容。标准设备的媒体查询
如果您想了解更多信息,可以访问: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/