html - 使用 CSS 动画后，页面上未显示其他元素

Question

大家好，我试着处理我的代码，但我无法自己修复它，类 .hello2 和 .more 没有显示在页面上，而它们应该出现在 id="下方flip”的内容，碰巧它消失了 .hello2 和 .more 类元素，这是我第一次使用动画，伙计们。这是我一直在使用的代码。期待

.possible {
    color: #fff;
    text-align: center;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 2rem;
    font-family: "Coiny", sans-serif;
}

.circle { 
    position: relative;
    border-radius: 50%;
    width: 30rem;
    height: 30rem;
    background-color: #6CA9A5;
    margin: 5rem auto;
    
}

.hello, .hello2 {
    position: relative;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    letter-spacing: .2rem;
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    padding-top: 100px;
    /* z-index: 1; */
}


.hello span:hover {
    color: #f4511e;
    transition: .59s;
}

.circle a {
    font-size: 15px;
    text-decoration: none;
}

/* .more a {
    height: 150px;
    width: 500px;
    background-color: #fff;
} */

#container {
    color:#999;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-size:36px;
    font-weight:bold;
    padding-top:180px;  
    position: relative;
    width:100%;
    bottom:45%;
    display:block;
    text-align: center;
  }
  
  #flip {
    height:60px;
    overflow:hidden;
  }
  
  #flip > div > div {
    border-radius: 30px;
    color:#fff;
    padding:4px 15px;
    height:45px;
    margin-bottom:45px;
    display:inline-block;
  }
  
  #flip div:first-child {
    animation: show 5s linear infinite;
  }
  
  #flip div div {
    background:#42c58a;
  }
  #flip div:first-child div {
    background:#4ec7f3;
  }
  #flip div:last-child div {
    background:#DC143C;
  }
  
  @keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
  }

<div class="content">
            <h1 class="possible">Everything is Possible</h1>
            <div class="circle"> 
                <p class="hello">Let's Make </p>
                <div id="container">
                    <div id="flip">
                        <div><div>wOrK</div></div>
                        <div><div>lifeStyle</div></div>
                        <div><div>Everything</div></div>
                    </div>
                </div>
                <p class="hello2">Awesome</p>
                <a href="" class="more">Read More</a>
            </div>
        </div>

Answer 1

我将 position:absolute 添加到 .hello2

.possible {
    color: #fff;
    text-align: center;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 2rem;
    font-family: "Coiny", sans-serif;
}

.circle { 
    position: relative;
    border-radius: 50%;
    width: 30rem;
    height: 30rem;
    background-color: #6CA9A5;
    margin: 5rem auto;
    
}

.hello, .hello2 {
    position: relative;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    letter-spacing: .2rem;
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    padding-top: 100px;
    /* z-index: 1; */
}

/* I added */
.hello2 {
  position:absolute;
  top:80px; /* changeable */
  left:50%;
  transform:translateX(-50%);
}
/* I added */

.hello span:hover {
    color: #f4511e;
    transition: .59s;
}

.circle a {
    font-size: 15px;
    text-decoration: none;
}

/* .more a {
    height: 150px;
    width: 500px;
    background-color: #fff;
} */

#container {
    color:#999;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-size:36px;
    font-weight:bold;
    padding-top:180px;  
    position: relative;
    width:100%;
    bottom:45%;
    display:block;
    text-align: center;
  }
  
  #flip {
    height:60px;
    overflow:hidden;
  }
  
  #flip > div > div {
    border-radius: 30px;
    color:#fff;
    padding:4px 15px;
    height:45px;
    margin-bottom:45px;
    display:inline-block;
  }
  
  #flip div:first-child {
    animation: show 5s linear infinite;
  }
  
  #flip div div {
    background:#42c58a;
  }
  #flip div:first-child div {
    background:#4ec7f3;
  }
  #flip div:last-child div {
    background:#DC143C;
  }
  
  @keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
  }

<div class="content">
            <h1 class="possible">Everything is Possible</h1>
            <div class="circle"> 
                <p class="hello">Let's Make </p>
                <div id="container">
                    <div id="flip">
                        <div><div>wOrK</div></div>
                        <div><div>lifeStyle</div></div>
                        <div><div>Everything</div></div>
                    </div>
                </div>
                <p class="hello2">Awesome</p>
                <a href="" class="more">Read More</a>
            </div>
        </div>