我的网站上有竖线。演示:https://codepen.io/Aventadorrre/pen/GRgjyYO
HTML
<div class="lines">
<div class="lines-blue">
<div id="line_0" class="line"></div>
<div id="line_1" class="line"></div>
<div id="line_2" class="line"></div>
<div id="line_3" class="line"></div>
<div id="line_4" class="line"></div>
<div id="line_5" class="line"></div>
<div id="line_6" class="line"></div>
</div>
<div class="line" id="line-0-white"></div>
<div class="line" id="line-1-white"></div>
<div class="line" id="line-2-white"></div>
<div class="line" id="line-3-white"></div>
<div class="line" id="line-4-white"></div>
<div class="line" id="line-5-white"></div>
<div class="line" id="line-6-white"></div>
</div>
SCSS
body{
background-color: #22222A;
position: relative;
min-height: 3000px;
.line {
position: relative;
&:before {
content: '';
background-color: blue;
position: fixed;
width: 1px;
height: 100%;
min-height: 5vh;
left: 0px;
z-index: 0;
animation: linemove 10s infinite;
}
&#line_0 {
&:before {
left: 6%;
height: 20%;
animation: linemove_1 10s infinite;
}
}
&#line_1 {
&:before {
left: 16%;
height: 20%;
animation: linemove_1 10s infinite;
}
}
&#line_2 {
&:before {
left: 32%;
height: 14%;
top: 40%;
animation: linemove_2 10s infinite;
}
}
&#line_3 {
&:before {
left: 48%;
height: 13%;
top: 24%;
animation: linemove_3 10s infinite;
}
}
&#line_4 {
&:before {
left: 64%;
height: 14%;
top: 36%;
animation: linemove_4 10s infinite;
}
}
&#line_5 {
&:before {
left: 80%;
height: 22%;
top: 60%;
animation: linemove_5 10s infinite;
z-index: 0;
}
}
&#line_6 {
&:before {
left: 94%;
height: 22%;
top: 60%;
animation: linemove_5 10s infinite;
z-index: 0;
}
}
&#line-0-white {
&:before {
left: 6%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-1-white {
&:before {
left: 16%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-2-white {
&:before {
left: 32%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-3-white {
&:before {
left: 48%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-4-white {
&:before {
left: 64%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-5-white {
&:before {
left: 80%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
&#line-6-white {
&:before {
left: 94%;
height: 100%;
background-color: #282830;
z-index: -1;
}
}
}
}
@keyframes linemove_1 {
0% {top: 20%;}
50% {top: 30%;}
100% {top: 20%;}
}
@keyframes linemove_2 {
0% {top: 40%;}
50% {top: 60%;}
100% {top: 40%;}
}
@keyframes linemove_3 {
0% {top: 24%;}
50% {top: 55%;}
100% {top: 24%;}
}
@keyframes linemove_4 {
0% {top: 36%;}
50% {top: 49%;}
100% {top: 36%;}
}
@keyframes linemove_5 {
0% {top: 60%;}
50% {top: 80%;}
100% {top: 60%;}
}
目前,它们一直在按CSS中的关键帧移动,但这不是我想要的。我希望它们静止并在滚动后移动一些距离。例如:它们是静态的->滚动->左起第一行上升100px,左起第二行下降80px,第三行... e.t.c.我想为每个距离定义这些距离,或者可以完全随机化,但是要在我指定的范围内。
我想我必须使用JS,但我仍在学习此
不确定那是不是您要找的东西?我附上了小提琴link。