Question

我有四个在div元素内旋转的动画section元素。 div元素需要放在文本下面（假设它有背景），这样就没有冲突线，所以我试图将background-color: #aeaeae; padding: 5px;添加到section p样式，但div元素仍在文本顶部旋转。

我还尝试将z-index添加到div和section p元素中，但它似乎无法正常工作。我还尝试在p标记中包装span元素并更改显示样式。

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

谢谢@Pangloss的回答：

“z-index仅适用于”定位框（即，除静态之外的任何位置）“，请参阅MDN规范”

@keyframes动画背后的文字

1 个答案: