如何将倾斜文本动画固定在屏幕右下角且不侵入页脚

问题1：倾斜文本固定在屏幕右下角，窗口缩放不偏移 #

修改.background-text的定位规则，锚定右下角，避免窗口缩放时偏移：

.background-text {
  position: fixed;
  right: 0;
  bottom: 35px; /* 与footer保持5px间距（footer高度30px + 5px） */
  transform-origin: bottom right; /* 以右下角为变换原点 */
  /* 其他属性保留，调整transform位置让文本从右下角向上延伸 */
}

问题2：避免倾斜文本侵入页脚，超出部分隐藏 #

给.background-text添加溢出隐藏规则，限制元素高度，确保文本在距离页脚5px处截断：

.background-text {
  overflow: hidden;
  max-height: calc(100vh - 35px); /* 视口高度减去footer+间距的总高度 */
  width: auto; /* 去掉100%宽度，避免横向无效溢出 */
  /* 移除无效的margin-bottom、padding，fixed定位下这些属性不影响截断 */
}

问题3：修正文本定位到右下角 #

调整transform参数，让文本从右下角起始显示：

.background-text {
  transform: translate(-15%, 0) rotate(-35deg); /* 调整translateX值，贴合右下角 */
  white-space: nowrap; /* 确保文本不换行 */
}

同时移除.bottom-right的无效padding-bottom（fixed子元素不受父元素padding影响）。

问题4：修复动画循环卡顿 #

卡顿源于动画首尾位置不衔接，修改关键帧让滚动距离等于文本宽度，同时复制文本实现无缝循环：

CSS关键帧修改： #

@keyframes scrollRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 滚动距离等于文本自身宽度 */
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

HTML文本复制（实现无缝循环）： #

<div class="text1">Proche • Honda • Hyundai • Toyota • Camry • Proche • Honda • Hyundai • Toyota • Camry •</div>
<div class="text2">Acura • Lamborghini • Ferrari • Ford • BMW • Audi • Acura • Lamborghini • Ferrari • Ford • BMW • Audi •</div>
<div class="text3">Cadillac • Fiat • Kia • Mazda • Maserati • Cadillac • Fiat • Kia • Mazda • Maserati •</div>

完整修改后的代码 #

CSS #

@import url('https://fonts.googleapis.com/css?family=League+Spartan');
body {
  font-family: 'League Spartan', sans-serif;
  background-color: #ffffff;
  margin: 0; /* 移除默认margin避免布局偏移 */
}

.container {
  position: relative;
  display: flex;
  flex-direction: row;
}

#page-container {
  position: relative;
  min-height: calc(100vh - 40px);
}

.header {
  margin-left: 5%;
  display: block;
}

.menu {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 60px;
  margin-top: 40px;
}

.menu-item {
  color: #000000;
  font-size: 2vw;
  font-weight: 200;
  cursor: pointer;
}

.left-content {
  width: 100%;
  float: left;
}

.right-content {
  position: relative;
  width: 50%;
}

.background-text {
  position: fixed;
  right: 0;
  bottom: 35px;
  transform-origin: bottom right;
  transform: translate(-15%, 0) rotate(-35deg);
  z-index: -1;
  background-color: transparent;
  overflow: hidden;
  max-height: calc(100vh - 35px);
  width: auto;
  box-sizing: border-box;
}

.text1 {
  white-space: nowrap;
  color: #E8E5E5;
  animation: scrollRight 20s linear infinite;
}

.text2 {
  white-space: nowrap;
  color: #E8E5E5;
  animation: scrollLeft 20s linear infinite;
}

.text3 {
  white-space: nowrap;
  color: #E8E5E5;
  animation: scrollRight 20s linear infinite;
}

@keyframes scrollRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.footer-line {
  display: none; /* 移除无效水平线，避免干扰footer布局 */
}

.footer-text {
  font-size: 10px;
  text-align: center;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  height: 30px; /* 明确footer高度，方便计算间距 */
  box-sizing: border-box;
}

HTML #

<div id="page-container">
  <div class="menu">
    <div class="menu-item">Homepage</div>
    <div class="menu-item">About</div>
    <div class="menu-item">FAQ</div>
  </div>
  
  <div class="container">
    <div class="left-content">
      <div class="header">
        <div> Welcome to my site! Here you can learn about different cars</div>
      </div>
    </div>
    
    <div class="right-content">
    </div>
  </div>
  
  <div class="background-text">
    <div class="text1">Proche • Honda • Hyundai • Toyota • Camry • Proche • Honda • Hyundai • Toyota • Camry •</div>
    <div class="text2">Acura • Lamborghini • Ferrari • Ford • BMW • Audi • Acura • Lamborghini • Ferrari • Ford • BMW • Audi •</div>
    <div class="text3">Cadillac • Fiat • Kia • Mazda • Maserati • Cadillac • Fiat • Kia • Mazda • Maserati •</div>
  </div>
</div>

<footer class="footer">
  <p class="footer-text">&copy; Copyright 2024 cario. All rights reserved.</p>
</footer>

内容的提问来源于stack exchange，提问作者fibonaccilinguine