如何使用CSS创建连续文本(字幕) [英] How to create running text (marquee) using CSS

问题描述

在学习CSS动画时，我面临着相当大的卡壳。

我将制作一个"转换：翻译"动画，该动画显示内容宽度溢出的文本，如下所示。
How it works?: (Youtube video link)

var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");

inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
  "<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
  "<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";


div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";

cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";

cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";

#div1 {
  margin: 10px;
  width: 300px;
  background: rgb(40, 40, 40);
  white-space: nowrap;
  overflow: hidden;
}

#content {
  color: white;
  width: 100%;
  /* animation-name: moving;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-animation-name: moving;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear; */
}

@keyframes moving {
  0% {
    transform: none;
    -webkit-transform: none;
  }
  65% {
    /*below code is pseudo code, It doesn't work,
          It is an explanation of the direction I want but.. I can't find way to ...ㅠㅠ*/
    transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    -webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    /*below value is caculated value of fixed text length and content width,
          but if either of these changes, this code will not be available for my purpose.
          Is there any way to specific values of CSS elements?*/
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
  100% {
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
}

<div id="div1">
  <h1 id="content">
    The only thing that matters now is everything You think of me
  </h1>
</div>
<div id="inf"></div>

类似上述代码
我希望使文本在内容中左移(h1)，与导致其溢出的截止量一样多。
但是，我找不到在CSS中引用内容值的方法。

有没有办法在不使用JavaScript的情况下通过引用CSS中另一个元素的特定值来修改CSS值？

我尽量避免使用Javascript更改关键帧的方法，尽管它可能相当繁重。

非常感谢。

推荐答案

您可以同时设置transform和margin-left的动画，以便动画在文本末尾准确结束：

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

@keyframes marquee {
  from {transform: translateX(0);     margin-left: 0;}
  to   {transform: translateX(-100%); margin-left: 100%; }
}

<h1 class="marquee">
  <span>The only thing that matters now is everything You think of me</span>
</h1>

<p class="marquee">
  <span>Beware of short texts!</span>
</p>

这篇关于如何使用CSS创建连续文本(字幕)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！