当前位置： 文江博客话题详情

带有滚动文本的响应式设计

发布于 2025-01-15 04:56:17 字数 6474 浏览 1 评论 0原文

我通常很擅长让事情做出响应，但我使用的滚动文本让我很难解决！

我有一些固定文本，然后是带有 CSS 动画的滚动文本，然后是下面的另一行固定文本。 我可以使用绝对定位轻松地将它们对齐在正确的位置，但我无法让它做出响应，并且当我调整屏幕大小时它会不断地将其抛出。尝试向所有文本添加文本包装器以对齐，但它不起作用。

我对代码进行了相当多的尝试，但希望有人可以帮助我:)

非常感谢任何帮助！

body {
  width: 100%;
  height: 100%;
  /* position: fixed; */
}

.header-wrapper {
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  /* position: relative; */
}

.all-text-wrap {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1440px;
  height: 500px;
  max-width: 100%;
  /* margin: auto; */
}

.content {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  height: 200px;
  overflow: hidden;
  font-family: "Lato", sans-serif;
  font-size: 70px;
  line-height: 80px;
  color: #ecf0f1;
  width: 800px;
}

.content__container {
  font-weight: 900;
  overflow: hidden;
  height: 55px;
  /* padding: 0 40px; */
}

.content__container__list {
  margin-top: 0;
  /* padding-left: 110px; */
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  padding: 0;
}

.content__container__list__item {
  line-height: 55px;
  margin: 0;
}

.intro-headline {
  position: absolute;
  top: 21%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

.intro-subline {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

@-webkit-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-o-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-moz-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scrolling Text</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <div class="content__container">
          <ul class="content__container__list">
            <li class="content__container__list__item">SUNRISE RUNS</li>
            <li class="content__container__list__item">MORNING COFFEES</li>
            <li class="content__container__list__item">PARK PICNICS</li>
            <li class="content__container__list__item">CITY STROLLS</li>
            <li class="content__container__list__item">STREET MARKETS</li>
            <li class="content__container__list__item">ARTS FAIRS</li>
            <li class="content__container__list__item">MUSIC FESTIVALS</li>
            <li class="content__container__list__item">ALFRESCO EVENINGS</li>
            <li class="content__container__list__item">URBAN SUNSETS</li>
          </ul>
        </div>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>

原文

I'm usually pretty good with getting things responsive but the scrolling text I am using is making it too complicated for me to work out!

I've got some fixed text, then the scrolling text with CSS animation, then another line of fixed text below.
I can align them easily in the right place using absolute positioning, but I can't get it to behave responsively and it keeps throwing it out when I resize the screen. Tried adding a text wrapper to all the text to align that but it's not working.

I've had quite a play about with the code but hoping someone can help me :)

Any help really appreciated!

body {
  width: 100%;
  height: 100%;
  /* position: fixed; */
}

.header-wrapper {
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  /* position: relative; */
}

.all-text-wrap {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1440px;
  height: 500px;
  max-width: 100%;
  /* margin: auto; */
}

.content {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  height: 200px;
  overflow: hidden;
  font-family: "Lato", sans-serif;
  font-size: 70px;
  line-height: 80px;
  color: #ecf0f1;
  width: 800px;
}

.content__container {
  font-weight: 900;
  overflow: hidden;
  height: 55px;
  /* padding: 0 40px; */
}

.content__container__list {
  margin-top: 0;
  /* padding-left: 110px; */
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  padding: 0;
}

.content__container__list__item {
  line-height: 55px;
  margin: 0;
}

.intro-headline {
  position: absolute;
  top: 21%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

.intro-subline {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

@-webkit-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-o-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-moz-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scrolling Text</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <div class="content__container">
          <ul class="content__container__list">
            <li class="content__container__list__item">SUNRISE RUNS</li>
            <li class="content__container__list__item">MORNING COFFEES</li>
            <li class="content__container__list__item">PARK PICNICS</li>
            <li class="content__container__list__item">CITY STROLLS</li>
            <li class="content__container__list__item">STREET MARKETS</li>
            <li class="content__container__list__item">ARTS FAIRS</li>
            <li class="content__container__list__item">MUSIC FESTIVALS</li>
            <li class="content__container__list__item">ALFRESCO EVENINGS</li>
            <li class="content__container__list__item">URBAN SUNSETS</li>
          </ul>
        </div>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

夢归不見 2025-01-22 04:56:17

如果我明白你在寻找什么，这里有一个解决方案。

没有绝对定位，只需将行高与滚动文本框的元素高度相匹配，然后让文本行流动即可。使用 flex 将整个物体水平放置（居中）。

另外，不要强制包装器的宽度 (.all-text-wrap)，因为您拥有的值 (800px) 会导致一些滚动行被包装。通过将其设置为 max-width 100% 的内联块，让它根据需要增长；

但在小屏幕上，它看起来不太好，因为滚动线要么溢出，要么必须换行。我使用媒体查询更改变量 --font-size 的值来修复它（不再需要换行）。 我还可以调整 --line-height。

:root {
  --font-size: 70px;
  --line-height: calc(var(--font-size) + 0px); /*adjust line spacing */
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
}

.header-wrapper {
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
}

.all-text-wrap {
  display: inline-block;
  max-width: 100%;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: #2f2f2f;
}

.content {
  height: var(--line-height);
  overflow: hidden;
  color: #ecf0f1;
}

.content__container__list {
  margin-top: 0;
  padding: 0;
  text-align: left;
  list-style: none;
  animation: change 10s infinite;
}

.content__container__list__item {
  white-space: nowrap;
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translateY(0);
  }
  11.11%,
  18.22% {
    transform: translateY(calc(-1 * var(--line-height)));
  }
  22.22%,
  29.33% {
    transform: translateY(calc(-2 * var(--line-height)));
  }
  33.33%,
  40.44% {
    transform: translateY(calc(-3 * var(--line-height)));
  }
  44.44%,
  51.55% {
    transform: translateY(calc(-4 * var(--line-height)));
  }
  55.55%,
  62.66% {
    transform: translateY(calc(-5 * var(--line-height)));
  }
  66.66%,
  73.77% {
    transform: translateY(calc(-6 * var(--line-height)));
  }
  77.77%,
  84.88% {
    transform: translateY(calc(-7 * var(--line-height)));
  }
  88.88%,
  95.99% {
    transform: translateY(calc(-8 * var(--line-height)));
  }
}

@media screen and (max-width: 900px) {
  :root {
    --font-size: 50px;
  }
}

@media screen and (max-width: 700px) {
  :root {
    --font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --font-size: 30px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scrolling Text</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <ul class="content__container__list">
          <li class="content__container__list__item">SUNRISE RUNS</li>
          <li class="content__container__list__item">MORNING COFFEES</li>
          <li class="content__container__list__item">PARK PICNICS</li>
          <li class="content__container__list__item">CITY STROLLS</li>
          <li class="content__container__list__item">STREET MARKETS</li>
          <li class="content__container__list__item">ARTS FAIRS</li>
          <li class="content__container__list__item">MUSIC FESTIVALS</li>
          <li class="content__container__list__item">ALFRESCO EVENINGS</li>
          <li class="content__container__list__item">URBAN SUNSETS</li>
        </ul>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>

If I understood what you're looking for, here's a solution.

No absolute positioning, just match your line height with your scrolling text box's element height, and let the text rows flow. Use flex to position the whole thing horizontally (center).

Also don't force the width of the wrapper (.all-text-wrap), as the value you had (800px) leaded to some scrolling lines being wrapped. Let it grow as required by setting it as an inline-block with max-width 100%;

On small screens though, it won't look good, as scrolling lines will either overflow or have to wrap. I used media queries to change the value of variable --font-size to fix it (no wrapping required anymore). I could also have adjusted --line-height.

:root {
  --font-size: 70px;
  --line-height: calc(var(--font-size) + 0px); /*adjust line spacing */
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
}

.header-wrapper {
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
}

.all-text-wrap {
  display: inline-block;
  max-width: 100%;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: #2f2f2f;
}

.content {
  height: var(--line-height);
  overflow: hidden;
  color: #ecf0f1;
}

.content__container__list {
  margin-top: 0;
  padding: 0;
  text-align: left;
  list-style: none;
  animation: change 10s infinite;
}

.content__container__list__item {
  white-space: nowrap;
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translateY(0);
  }
  11.11%,
  18.22% {
    transform: translateY(calc(-1 * var(--line-height)));
  }
  22.22%,
  29.33% {
    transform: translateY(calc(-2 * var(--line-height)));
  }
  33.33%,
  40.44% {
    transform: translateY(calc(-3 * var(--line-height)));
  }
  44.44%,
  51.55% {
    transform: translateY(calc(-4 * var(--line-height)));
  }
  55.55%,
  62.66% {
    transform: translateY(calc(-5 * var(--line-height)));
  }
  66.66%,
  73.77% {
    transform: translateY(calc(-6 * var(--line-height)));
  }
  77.77%,
  84.88% {
    transform: translateY(calc(-7 * var(--line-height)));
  }
  88.88%,
  95.99% {
    transform: translateY(calc(-8 * var(--line-height)));
  }
}

@media screen and (max-width: 900px) {
  :root {
    --font-size: 50px;
  }
}

@media screen and (max-width: 700px) {
  :root {
    --font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --font-size: 30px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scrolling Text</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <ul class="content__container__list">
          <li class="content__container__list__item">SUNRISE RUNS</li>
          <li class="content__container__list__item">MORNING COFFEES</li>
          <li class="content__container__list__item">PARK PICNICS</li>
          <li class="content__container__list__item">CITY STROLLS</li>
          <li class="content__container__list__item">STREET MARKETS</li>
          <li class="content__container__list__item">ARTS FAIRS</li>
          <li class="content__container__list__item">MUSIC FESTIVALS</li>
          <li class="content__container__list__item">ALFRESCO EVENINGS</li>
          <li class="content__container__list__item">URBAN SUNSETS</li>
        </ul>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>

回复 原文
~没有更多了~

关于作者

寻找我们的幸福

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文