Question

我的div和里面的段落有问题我想做的事情就是div有一个宽度动画（在2s内从0％到80％），我唯一的问题就是在div里面有一段写有句子的段落;导致div在水平方向上太大（它确实有背景颜色，但我必须用图像更改它）。

那么，我怎样才能解决段落存在的问题，但是看不见的东西而不占用空间（那么它必须在某个时间出现）？

编辑：

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

所以基本上这是div的代码，里面有一个图像（这不是问题）问题是写的段落在水平上扩展，我不希望这样。我希望段落总是在图像的右侧而不是在水平上扩展，是否有办法？

我想到了一些东西，比如让文字从不透明度为0的div中出来，当div扩展到最大值使它出现时，我想知道是否有另一种方式

Answer 1

我相信我对你的问题有了答案，下面的内容应该适用于你想要达到的目标。

您可以为容器元素设置固定宽度，以使文本不超过此值。如果将文本的不透明度设置为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>

希望这有帮助！

HTML / CSS段落和div

1 个答案: