@keyframes動畫背後的文字

我有四個動畫div元素在section元素內旋轉。 div元素需要放在文本下面（假設它有背景），以便沒有碰撞線，所以我試圖做的是將background-color: #aeaeae; padding: 5px;添加到section p樣式，但div元素仍然在頂部文本。@keyframes動畫背後的文字

我也嘗試將z-index添加到div和section p元素，但它似乎並沒有工作。我也嘗試在span標記中包裝p元素並更改顯示樣式。

@keyframes lines { 
 
    0% {-webkit-transform: rotate(30deg);} 
 
    100% {-webkit-transform: rotate(390deg);} 
 
} 
 

 
section { 
 
    position: relative; 
 
    padding: 50px; 
 
    overflow: hidden; 
 
} 
 

 
section h1 { 
 
    text-transform: uppercase; 
 
    width: 150px; 
 
    padding: 0 0 15px 0; 
 
    border-bottom: 2px solid black; 
 
    margin: 0; 
 
} 
 

 
section p { 
 
    width: 50%; 
 
    line-height: 1.5em; 
 
    background-color: #aeaeae; 
 
    padding: 5px; 
 
} 
 

 
.section-1 { 
 
    background-color: #aeaeae; 
 
    overflow: hidden; 
 
} 
 

 
.line { 
 
    position: absolute; 
 
    background-color: black; 
 
    width: 2000px; 
 
    height: 2px; 
 
} 
 
.line-1 { 
 
    right: 521px; 
 
    top: 33px; 
 
    animation: lines linear 100s infinite; 
 
} 
 
.line-2 { 
 
    left: 9; 
 
    top: 551px; 
 
    animation: lines linear 140s infinite; 
 
} 
 
.line-3 { 
 
    left: -212px; 
 
    top: 29px; 
 
    animation: lines reverse 120s infinite; 
 
} 
 
.line-4 { 
 
    left: -400px; 
 
    top: 20px; 
 
    animation: lines reverse 80s infinite; 
 
}

<section class="section-1"> 
 
    <div class="line line-1"></div> 
 
    <div class="line line-2"></div> 
 
    <div class="line line-3"></div> 
 
    <div class="line line-4"></div> 
 
    <h1>About</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare malesuada risus. Pellentesque vel neque a quam vehicula egestas. Cras vestibulum nisi lorem, nec dictum nisi luctus eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
 
    Nunc maximus, velit at blandit pulvinar, est nisl sodales leo, eu scelerisque ante mauris sed purus.</p> 
 
    <p>Maecenas blandit nec felis vel tincidunt. Curabitur id nibh dui. Ut suscipit interdum sem, sed auctor enim dignissim et. Nam luctus augue sit amet ullamcorper tincidunt. Donec posuere condimentum enim in dignissim. Ut purus ante, vehicula in luctus 
 
    non, vestibulum non ipsum. Etiam semper urna sed nunc ornare.</p> 
 
</section>

來源

2017-04-30 Karson Kalt

如果需要，請嘗試設置'position：relative;'以及'z-index'。 – Stickers

你能幫我理解爲什麼這個解決方案有效嗎？ –

如果需要，您也可以使用'position：static;'和'z-index'。 – NathanielSantley

謝謝@Pangloss的回答：

「的z-index只適用「爲定位的盒子（即，一個比靜態以外的任何位置）」，請參閱MDN規範「

來源

2017-04-30 19:03:37

@keyframes動畫背後的文字

回答

相關問題