Question

我有 HTML ：

<div id="container">
   <div id="content">
      <h2 class="frame1">Loriam Ipisum</h2>
      <h2 class="frame2">Loriam Ipisumsad</h2>
   </div>
</div>

这个 CSS ：

body{margin: 0; padding: 0;}

#container{
        width: 100%;        
    top: 200px;
    border: 1px solid black;
    text-align: center;     
    position: relative;
    overflow: hidden;
    }

#content{
    width: 300px;
    height: 50px;
    border: 1px solid blue;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }

#content h2{
    position: relative;
    display: inline-block;
    }

#content h2.frame1{
    -webkit-animation-delay: 0s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
}

#content h2.frame2{
    -webkit-animation-delay: 3s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes efeito1{

   0%{
    left: 0;
    opacity: 0;         
}
   50%{         
    opacity: 0.4;
    left: 100px;
    opacity: 0.4;
    left: 200;
}
   100%{                        
    opacity: 0;         
    left: 300px;
    opacity: 0.4;
    }
}

我想要做的是：我希望两个.frame都在同一个LINE上。因此，当我应用动画时，它将发生在同一个地方，产生一个很好的效果。我希望他们在同一条线上，在同一个地方，但没有一个文字在另一个看起来像一团糟...... 我试图使用溢出：隐藏：但是没有工作，文本保持一个在另一个之上......

我想申请，效果如下：http://codepen.io/anon/pen/LcwKj/

有什么建议吗？谢谢！

Answer 1

这个效果是你的目标：

HTML

<div id="container">
   <div id="content">
      <h2 class="frame1">Loriam Ipisum</h2>
      <h2 class="frame2">sad</h2>
   </div>
</div>

CSS

body{margin: 0; padding: 0;}

#container{
        width: 100%;        
    top: 200px;
    border: 1px solid black;
    text-align: center;     
    position: relative;
    overflow: hidden;
    }

#content{
    width: 100%;
    height: 50px;
    border: 1px solid blue;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }

#content h2{
    position: absolute;
    display: inline-block;
    }

#content h2.frame1{
    -webkit-animation-delay: 0s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
    opacity:0;
}

#content h2.frame2{
    -webkit-animation-delay: 3s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
    opacity:0;
    position:absolute;
}

@-webkit-keyframes efeito1{

   0%{
    opacity: 0;
    }
   100%{                        
    opacity: 100;
    }
}

将文本设置在同一行

1 个答案: