1. 首页
  2. 问答
  3. 单独为文字动画字符

单独为文字动画字符

2017-07-27 44 views
1

我正在尝试分别在一行文字中设置动画文字的字符。我想要实现的是让他们一次飞出一个屏幕。我知道我可以使用转换和转换来做到这一点：translateX。但是我遇到了一些问题。首先，文本的外部div不包裹所有字符，然后应用transform：translateX到其中一个跨度不起作用。我已经创建了一个小样本供您检查。谢谢。单独为文字动画字符

#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); 
 
}
<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>

https://jsfiddle.net/a3x4ykza/

来源

2017-07-27 Reece

+1

甲是直列元件和Transform属性内联元件不适用。 – Gerard

+0

@Gerard是刚刚做了一些研究，并意识到，谢谢 – Reece

+0

你想劳动力文字飞出？ – Hash

回答

1

您已经使用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; 
    } 
} 


#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; 
 
    } 
 
}
<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>

来源

2017-07-27 11:18:17 frnt

+0

谢谢，这是完美的。杰拉德的答案也奏效，但我尽量避免使用flexbox – Reece

+0

欢迎@Reece :-)，是的，这也行得通。为您的计划输出使用哪项工作。 – frnt

1

制作#logo_text一个Flexbox的和span有display:inline-block会做的伎俩。尽管如此，你还是必须玩Y轴。

#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); 
 
}
<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>

来源

2017-07-27 10:56:41 Gerard

1

您可以使用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>

你可以看到文本下车屏幕（向左）一个在time.The动画开始在300毫秒和每个后续字母每300毫秒后离开屏幕。

来源

2017-07-27 11:16:19

相关问题

 相关问题