0
我有四個動畫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>
如果需要,請嘗試設置'position:relative;'以及'z-index'。 – Stickers
你能幫我理解爲什麼這個解決方案有效嗎? –
如果需要,您也可以使用'position:static;'和'z-index'。 – NathanielSantley