英文:
Html & css marquee
问题
以下是您要翻译的内容：
我的HTML在使用CSS来制作跑马灯动画时被截断。
.marquee {
position: fixed;
width: 100%;
padding-top: 1px;
overflow: visible;
white-space: nowrap;
background-color: #000000;
animation: slide 10s linear infinite;
}
@keyframes slide {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<div class="marquee">
使用代码SUMMER50，订单满300美元可享受50美元折扣！
</div>
我尝试将文本移到最右边，以便让它从屏幕外开始，并添加了margin-left: 600px;，试图让跑马灯框从屏幕外开始从右向左动画。
结果我的代码在iPhone上被截断。不知道为什么。这是网站链接：https://614.productions/
英文:
My html gets cuttoff when using css to animate the marquee.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.marquee {
position: fixed;
width: 100%;
padding-top: 1px;
overflow: visible;
white-space: nowrap;
background-color: #000000;
animation: slide 10s linear infinite;
}
@keyframes slide {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<!-- language: lang-html -->
<div class="marquee">
Use code SUMMER50 for a $50 discount on orders over $300!
</div>
<!-- end snippet -->
I tried moving the text all the way to the right trying to get it to start off the screen and I added a margin-left: 600px; just trying to get the marquee box to start off screen and animate from right to left.
In result my code gets cutoff on the iphone. idk why. here is the website https://614.productions/
答案1
得分: 2
尝试用vw（视口宽度）单位替换translate函数中的百分比值。
这是因为translate中的100%是使用元素尺寸计算的。因此，在您的网站上，100%的元素宽度不是屏幕宽度，而是约600px，所以translateX可能会将其平移大约600px。
无论如何，我不推荐使用跑马灯功能，因为它的用户体验很差：它会分散用户注意力，而且很难阅读不断移动的文本。
.marquee {
position: fixed;
width: 100%;
padding-top: 1px;
overflow: visible;
white-space: nowrap;
background-color: #000000;
animation: slide 10s linear infinite;
color: white;
text-align: center; /** better with this */
}
/** 这是更改的地方 */
@keyframes slide {
0% { transform: translateX(100vw); }
100% { transform: translateX(-100vw); }
}
<div class="marquee">
使用代码SUMMER50，订单满300美元即可享受50美元折扣！
</div>
英文:
Try replacing percent value in the translate functions with vw (viewport width) units.
This is because 100% of translate is calculated using the element size. So in your site, the element width of 100% is not the width of the screen, it is about 600px, so translateX is likely to translate about 600px.
Anyway, I don't recommend using the marquee functionality because it has very bad UX: it distracts users, and it is hard to read text that is in constant movement.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.marquee {
position: fixed;
width: 100%;
padding-top: 1px;
overflow: visible;
white-space: nowrap;
background-color: #000000;
animation: slide 10s linear infinite;
color: white;
text-align: center; /** better with this */
}
/** here is the change */
@keyframes slide {
0% { transform: translateX(100vw); }
100% { transform: translateX(-100vw); }
}
<!-- language: lang-html -->
<div class="marquee">
Use code SUMMER50 for a $50 discount on orders over $300!
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论