Link to Gyazo image 1: https://gyazo.com/015425f0decb187e28b620c1e3206391 Issue with first image: https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf
I'm currently working on a website and came up with a cool concept of having two lines crossing the screen upon loading. However, when I tried implementing this, every other element seemed to follow the trajectory of these lines. This made me suspect that there might be an issue in the code structure. So, my question is: How can I create two intersecting lines across the screen without having to resort to using 'position: absolute' for all other elements? I hope the provided code gives a clearer understanding of my problem.
I've experimented with various solutions but have yet to find the right one.
#horizontal-line {
height: 0px;
width: 2px;
border-bottom: 1px solid #1e1e1e;
-webkit-animation: increase 2s;
-moz-animation: increase 2s;
animation: increase 2s;
animation-fill-mode: forwards;
float: left;
}
@keyframes increase {
100% {
width: 100%;
}
}
#vertical-line {
height: 0px;
width: 2px;
border-left: 1px solid #1e1e1e;
-webkit-animation: increaseV 2s;
-moz-animation: increaseV 2s;
animation: increaseV 2s;
animation-fill-mode: forwards;
float: right;
margin-right: 25%;
margin-top: -120px;
}
@keyframes increaseV {
100% {
height: 850px;
}
}<div id="horizontal-line"></div>
<div id="vertical-line"></div>If anyone has a more efficient way to achieve the desired effect of crossing lines or spots any errors in the existing code, your insights would be highly valued!