HTML/CSS的段落和div

-1

我有一个问题，我的div和段落里面有我想要做的事情是与div有一个动画的宽度（从2％到80％的动画）和我唯一遇到的问题是，在div里面有一段写有句子的段落，导致div在横向上太大（它确实有背景色，但我必须用图像改变它）。HTML/CSS的段落和div

那么，我该如何解决段落存在的问题，但看起来像看不见，不占用空间（然后它必须在某个时间出现）？

编辑：

div.pick 
{ 
height:30%; 
overflow:hidden; 
animation: example 2s; 
} 
@keyframes example 
{ 
0% 
{ 
width:0%; 
} 
100% 
{ 
width:80%; 
}

所以基本上这是对DIV的代码，里面有一个形象（这不是问题）问题是，写的一段horizzontally扩张，我不想那。我希望段落总是在图像的右侧，而不是水平扩展，有没有办法？

我想到了什么样使文字走出去的div不透明度为0，另外在div扩展到最大使其出现，我想知道是否有另一种方式

来源

2017-03-16 Neyco

欢迎来到StackOverflow。如果您之前没有使用过该网站，请阅读常见问题解答，但我们需要查看代码或您首先尝试的内容。 – zik

请提供代码或截图类似的东西 –

你试过了吗？你失败了吗？分享一些代码，如果是这样，否则，截图/图像解释你想要实现什么 –

我相信我有一个回答你的问题，下面应该为你想达到的目的而工作。

您可以为容器元素设置固定宽度，以便文本不超过此值。如果将文本的不透明度设置为0，并在动画完成时将其更改为1，这将逐渐向您输入的动画时间显示文本。

  <style> 

      .box { width:200px; height:100%; border:1px solid red; } 
      .box p { opacity:0; } 
      .box:hover { animation:expandDiv 2s linear forwards; -webkit-animation:expandDiv 2s linear forwards; } 
      .box:hover p { animation:revealText 2s linear forwards; -webkit-animation:revealText 2s linear forwards; } 

      @keyframes expandDiv { 
       100% { width:300px; } 
      } 

      @-webkit-keyframes expandDiv { 
       100% { width:300px; } 
      } 

      @keyframes revealText { 
       100% { opacity:1; }  
      } 

      @-webkit-keyframes revealText { 
       100% { opacity:1; } 
      } 

      </style>  


      <div class="box"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div>

希望这有助于！

来源

2017-03-16 11:52:43

你怎么能猜到这是没有任何代码的写回答？ –

我想我理解这个问题，但我可能错了@SaugatBhattarai –

HTML/CSS的段落和div

回答

相关问题