Question

我有一个动画标题，基本上是一个停滞的单词，在它之前是一个很多单词的旋转木马（在相同的位置）淡入和淡出（感谢animate.css）。我按照youtube上的教程获取基本网页，使其看起来很熟悉或简单。但是，前面的单词卡在复杂的div和标题中以尝试获取多个动画（每个动画都进入和退出）。问题是当一个长字出现在屏幕上时，它会重叠在第二个字上。

（包含图片）简要说明一下，按钮和文本都在＆＃34; display：table;＆＃34; div和单词通常只是一个有凝聚力的句子，并且工作得很好。但是，我必须将它们拆开，防止它们高于/低于彼此的唯一方法（非常烦人）是迫使它们左右浮动。但是，当我现在删除浮动（经过多次＆＃39;调试＆＃39;）后，它似乎并没有真正改变设计，这让我非常担心。我已经包含了我的代码。请帮忙！我现在的想法是使文本正确对齐并相对于第二个单词，但我尝试的所有内容似乎都没有做任何事情。如果有任何其他解决方案，我全都耳朵。

<section class="intro">
    <div class="inner">
        <div class="content">
            <section style="clear: both">
                <div style="position:absolute"  z-index="1">
                <h1 z-index="inherit"display="inline-block" class="os-animation" data-os-animation="fadeInDown" data-os-animation-delay="0s">
                    <div text-align="right" z-index="inherit" class="os-animation" data-os-animation="fadeOutDown" data-os-animation-delay="1s">Loving</div></h1>
                </div>
                <div style="position:absolute" margin-left="15%" z-index="2">
                <h1 z-index="inherit" display="inline-block" class="os-animation" data-os-animation="fadeInDown" data-os-animation-delay="1s">
                    <div text-align="right" z-index="inherit" class="os-animation" data-os-animation="fadeOutDown" data-os-animation-delay="2s">Enjoying</div></h1>
                </div>
                <div style="position:absolute"  z-index="3">
                <h1 z-index="inherit"  display="inline-block" class="os-animation" data-os-animation="fadeInDown" data-os-animation-delay="2s">
                    <div text-align="right" z-index="inherit" class="os-animation" data-os-animation="fadeOutDown" data-os-animation-delay="3s">Exploring</div></h1>
                </div>

                <h1 style="float: right">Irelnd</h1>
            </section>

            <section style="clear:both" class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="5s">
                <a href="file:///C:/Users/username/Documents/Landing%20Page%20Starter%20Files/index.html" class="btn">Get Started</a>
            </section>
        </div>
    </div>
</section>

的CSS：

   @import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

#carousel {
    background-color: green;
    text-align: center;
    vertical-align: middle;
    float: left;
}
#Dubai{
    background-color: red;
}



.intro{
    height:100%;
    width:100%;
    margin:auto;
    background: url(https://static.pexels.com/photos/470641/pexels-photo-470641.jpeg) no-repeat ;

    display: table;
    top:0;
    background-size:cover;

}
.intro .inner{
    display: table-cell;
    vertical-align:middle;
    width: 100%;
}
.content{
    max-width:480px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 28%;
    padding-left: 4%;
}

.content h1 {
    font-family: 'Yantramanav', sans-serif;
    font-size: 600%;
    font-weight: 100;
    color: #E1efe9;
    line-height: 55%;
}

.btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 135%;
    font-weight: 400;
    color: #3c4f1f;
    text-transform: uppercase;
    text-decoration: none;
    border: solid #3c4f1f;
    padding:10px 20px;
    border-radius: 9px;
    transition: all 0.3s;
}
.btn:hover{
    color: #a0afa8;
    border: solid #a0afa8;
}
p{
    font-size: 150%;
    line-height: 120%;
    font-family: sans-serif;
}




/*--- Media Queries --*/
@media screen and (max-width: 900px) {
    .content{
        padding-bottom: 30%;
        max-width: 320px;
    }
    .content h1{
        font-size: 450%;
    }
    .btn{
        font-size: 130%;
        padding: 9px 15px;
    }

}
@media screen and (max-width: 768px) {
    .content{
        padding-bottom: 40%;
        max-width: 210px;
    }
    .content h1{
        font-size: 300%;
    }
    .btn{
        font-size: 110%;
        padding: 9px 15px;
    }
    p{
        font-size: 120%;
        line-height: 100%;
    }

}
@media screen and (max-width: 480px) {
    .content{
        padding-bottom: 50%;
        max-width: 173px;
    }
    .content h1{
        font-size: 250%;
    }
    .btn{
        font-size: 90%;
        padding: 4px 12px;
    }
    p{
        font-size: 100%;
        line-height: 100%;
    }
}

文字对齐/利润率左/等。不适用于我的动画标题

0 个答案: