Question

我试图分别为一行文字中的文字字符设置动画。我想要实现的是让它们一次飞出一个屏幕。我知道我可以使用过渡和转换来做到这一点：translateX。但是我遇到了几个问题。首先，文本的外部div不包装所有字符，其次应用transform：translateX到其中一个跨度不起作用。我已经创建了一个小型演示供您检查。感谢。

＆＃13;

#burger_container {
  background-color: #404041;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  z-index: 101;
}

svg {
  margin: 20px auto 0 auto;
  display: block;
}

#logo_text {
  transform: rotate(-90deg);
  margin-top: 350px;
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
}

#logo_text span {
  font-weight: 400;
}

#logo_text span:nth-child(1){
  transform: translatex(-50px);
}

＆＃13;

<div id="burger_container">
  <div>
    <svg id="button" style="height: 26px; width: 26px;">
      <g style="" fill="#f04d43">
        <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
      </g>
    </svg>
    
      <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
</div>

＆＃13;

https://jsfiddle.net/a3x4ykza/

Answer 1

使#logo_text成为弹性箱，而span拥有display:inline-block即可。你不得不玩Y轴。

＆＃13;

#burger_container {
  background-color: #404041;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  z-index: 101;
}

svg {
  margin: 20px auto 0 auto;
  display: block;
}

#logo_text {
  transform: rotate(-90deg);
  margin-top: 350px;
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
  display: flex;
}

#logo_text span {
  font-weight: 400;
  display: inline-block;
}

#logo_text span:nth-child(1){
  transform: translatex(-50px);
}

＆＃13;

<div id="burger_container">
  <div>
    <svg id="button" style="height: 26px; width: 26px;">
      <g style="" fill="#f04d43">
        <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
      </g>
    </svg>
    
      <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
</div>

＆＃13;

Answer 2

如果它是您的选项，您可以使用JavaScript。仅在此部分更改css：

#logo_text span{
    position:relative;
}

然后在最后将这部分包含在你的身体里。

<script>
       var span_texts=document.getElementById("logo_text").getElementsByTagName("span");
       for(var i=0;i<span_texts.length;i++){
            (function(j){
                var elem=span_texts[j];
                setTimeout(function(){
                elem.setAttribute("style","top:-70px");
                },300*j+300);
            })(i);
       }
</script>

您可以看到文本一次一个地离开屏幕（向左）。动画从300ms开始，每个后续字母在每300ms后离开屏幕。

Answer 3

您使用了span标记，默认情况下为inline元素，现在如果我将其更改为display，那么它breaks形成如何对齐，您可以将其position更改为relative，然后使用CSS animation，您可以使用top属性逐个取下每个文本，如下所示，

选择每个span标签然后如所述使用CSS动画。

#logo_text span:nth-of-type(8) {
  animation: mv 1s ease forwards;
}

#logo_text span:nth-of-type(9) {
  animation: mv 1s ease forwards 1s;
}

#logo_text span:nth-of-type(10) {
  animation: mv 1s ease forwards 2s;
}

#logo_text span:nth-of-type(11) {
  animation: mv 1s ease forwards 3s;
}

#logo_text span:nth-of-type(12) {
  animation: mv 1s ease forwards 4s;
}

#logo_text span:nth-of-type(13) {
  animation: mv 1s ease forwards 5s;
}

#logo_text span:nth-of-type(14) {
  animation: mv 1s ease forwards 6s;
}

#logo_text span:nth-of-type(15) {
  animation: mv 1s ease forwards 7s;
}

#logo_text span:nth-of-type(16) {
  animation: mv 1s ease forwards 8s;
}

@keyframes mv {
  from {
    top: 0;
  }
  to {
    top: -50px;
  }
}

＆＃13;

#burger_container {
  background-color: #404041;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  z-index: 101;
}

svg {
  margin: 20px auto 0 auto;
  display: block;
}

.line1,
.line2,
.line3 {
  transition: all 0.3s ease;
}

.open1 {
  transform-origin: top left;
  transform: translatex(3px) translatey(-1px) rotate(45deg);
  width: 33px;
}

.open2 {
  opacity: 0;
}

.open3 {
  transform-origin: bottom left;
  transform: translatex(3px) translatey(1px) rotate(-45deg);
  width: 33px;
}

#trans_overlay {
  display: none;
}

#logo_two {
  display: none;
}

#logo_text {
  transform: rotate(-90deg);
  margin-top: 300px;   /*Change this back to 350px, just to see output I have change it to 300px*/
  font-size: 40px;
  color: #ffffff;
  font-weight: 700;
}

#logo_text span {
  font-weight: 400;
  position: relative;
}

#logo_text span:nth-of-type(8) {
  animation: mv 1s ease forwards;
}

#logo_text span:nth-of-type(9) {
  animation: mv 1s ease forwards 1s;
}

#logo_text span:nth-of-type(10) {
  animation: mv 1s ease forwards 2s;
}

#logo_text span:nth-of-type(11) {
  animation: mv 1s ease forwards 3s;
}

#logo_text span:nth-of-type(12) {
  animation: mv 1s ease forwards 4s;
}

#logo_text span:nth-of-type(13) {
  animation: mv 1s ease forwards 5s;
}

#logo_text span:nth-of-type(14) {
  animation: mv 1s ease forwards 6s;
}

#logo_text span:nth-of-type(15) {
  animation: mv 1s ease forwards 7s;
}

#logo_text span:nth-of-type(16) {
  animation: mv 1s ease forwards 8s;
}

@keyframes mv {
  from {
    top: 0;
  }
  to {
    top: -50px;
  }
}

＆＃13;

<div id="burger_container">
  <div>
    <svg id="button" style="height: 26px; width: 26px;">
      <g style="" fill="#f04d43">
        <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" />
        <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" />
      </g>
    </svg>
  </div>

  <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div>
</div>

＆＃13;

分别为文本设置动画字符

3 个答案: