0
Ich habe vier animierte div Elemente, die in einem section Element rotieren. Die div Elemente müssen unter dem Text gehen (vorausgesetzt, es hat einen Hintergrund), so dass es keine widerstreitenden Linien gibt, also was ich versucht habe, ist background-color: #aeaeae; padding: 5px; zu der section p Art hinzuzufügen, aber die div Elemente drehen noch auf die Oberseite Text.@keyframes Animation hinter Text
Ich habe auch versucht, z-index zu div und section p Elemente hinzuzufügen, aber es scheint nicht zu funktionieren. Ich habe auch versucht, das Element in einem span Tag zu verpacken und den Anzeigestil zu ändern.
@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>
Versuchen Sie, Position' relative: 'zusammen mit' z-index' einzustellen, falls erforderlich. – Stickers
Können Sie mir helfen zu verstehen, warum diese Lösung funktioniert hat? –
Sie könnten auch 'position: static;' mit 'z-index' verwenden, wenn Sie möchten. – NathanielSantley