CSS动画文本从左到右的div容器与溢出隐藏

所以我最近在做一些私人项目，因为我是一个巨大的CSS粉丝，我想做大多数的CSS动画，而不是在JavaScript。

今天我想创建这样的东西:文字从左向右移动

我认为这可能与CSS动画。理论上，我有一个具有position:relative，固定宽度和overflow:hidden的div包装器。在内部，有一个div, position:absolute, left:0和bottom:0。现在在某些情况下，文本对于父div来说太长了，我想让text text "float"虽然父div:实际上是动画div从左:0到右:0。

我偶然发现了一些CSS动画，并尝试了这个

@keyframes floatText{
  from {
    left: 0;
  }
  to {
    right: 0;
  }
}

在子div上。当然这不起作用。像从left: 0到left: -100px这样的动画可以工作，但是当文本长度超过额外的100px时，这并不能确保整个文本是可见的。有没有一种干净利落的方法来实现这个目标?当然，JavaScript可以实现这个期望的功能。但是我想知道是否有一种方法可以在纯CSS中做到这一点。

提前感谢!

编辑:

为了澄清我的想法，我创建了一个gif来显示我想用CSS动画完成的内容:动画

如你所见，我们有三个这样的相邻，一些有一个直接适合的名称，一些可能太长，应该前后动画，以便用户可以阅读:)!

再次感谢!

EDIT2:

有办法完成这样的事情吗?

@keyframes floatText{
  from {
    left: 0px;
  }
  to {
    left: (-this.width+parent.width)px;
  }
}

这将是最终的解决方案，我知道这种编码在CSS中是不可能的，但也许有一些CSS3的调整，如calc()或其他东西?我现在没有主意了

当你的文字到达右边框时，你可以停下来

本方案使用CSS translate .

技巧在于translate的百分比对应于当前元素，而left指的是父元素。

确保你的文本的display属性是而不是 inline。

只使用CSS的缺点:

较短的文本也得到动画。为了解决这个问题，可以考虑使用JavaScript或将文本设置为min-width: 100%;。这可以导致动画的最小摆动。
所有文本都有相同的动画持续时间，这对于长文本来说可能很糟糕。同样，考虑使用JavaScript(你会想看看scrollWidth)或制作许多动画类，这可能很难管理。

.animated {
  overflow: hidden;
  width: 11rem;
  white-space: nowrap;
}
.animated > * {
  display: inline-block;
  position: relative;
  animation: 3s linear 0s infinite alternate move;
}
.animated > *.min {
  min-width: 100%;
}
@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}
/* Non-solution styles */
.container {
  display: flex;
  flex-wrap: wrap;
}
.animated {
  font-size: 2rem;
  font-family: sans-serif;
  border: 0.1rem solid black;
  margin: 1rem;
}
.animated > * {
  box-sizing: border-box;
  padding: .5rem 1rem;
}

<div class="container">
<div class="animated">
  <span>Short</span>
</div>
<div class="animated">
  <span class="min">Short</span>
</div>
<div class="animated">
  <span>Some more text</span>
</div>
<div class="animated">
  <span>A really long text to scroll through</span>
</div>
</div>

更改%中的关键帧值

试试这个

body{ 
    overflow: hidden;
}
p{
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
}
@-webkit-keyframes floatText{
  from {
    left: 00%;
  }
  to {
    /* left: auto; */
    left: 100%;
  }
}

<p>hello text</p>

我试过了

注意:但你会发现一件事是缺失的，你会看到动画不会达到纯粹的左和右，我的意思是你不能查看div的全文

这是由于左和右的值，我已经设置为-100和100所以因为我找不到替代方法所以

现在我想看看你怎么能做到这一点。

和这是我的尝试

div.main_div{
    margin:0;
    padding:0;
    width: 20%;
    height: 60%;
    background-color:grey;    
    position:absolute;
    overflow: hidden;
}
div.transparent_div{
    width:100%;
    height:50px;
    bottom:0;
    background:red;
    position:absolute;  
}
div.text_wrapper{    
    height:50px;
    bottom:0;
    z-index:10;
    background:transparent;
    white-space: nowrap;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
    color:white;
    font-size:2em;
    vertical-align: middle;
    -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
    position:absolute;
    -webkit-animation: anim 1.5s infinite;
    animation: anim 1.5s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}
@-webkit-keyframes anim {
     from {
         left: -100%;         
     }
     to {
         left:100%;
     }
}
@keyframes anim {
   from {
         left: -100%;
     }
     to {
         left:100%;
     }
}

<body>
<div class="main_div">
  <div class="text_wrapper">Hiii i am going right to left infinete times and here are the news
  </div>
  <div class="transparent_div"></div>
</div>
</body>

，在这里您可以查看上述工作代码的演示

演示代码

为动画添加ease-in-out以使其平滑，并使用%而不是px来左右移动。

我们可以编写jQuery代码，用于查找溢出文本并启用动画:

    function AutoScrollText() {
        var els = document.getElementsByClassName('container');
        [].forEach.call(els, function myFunction(el) {
            var isOverflowing = el.clientWidth < el.scrollWidth;
            if (isOverflowing) {
                $(el).children('span:first-child').addClass('animated');
            }
            var curOverf = el.style.overflow;
            if (curOverf == "" || curOverf === "visible") {
                $(el).css({ "overflow":"hidden"});
            }
        });
    }

当你的文字到达右边框时，你可以停下来

相关内容

最新更新

热门标签：