元素上升的拼贴(我怎么做的)

Question

有谁知道我如何在自己的网站上做到这一点吗?(vuejs)https://cdn.larkx.xyz/kv2bos6i.gif或https://sparkedhost.com

Answer 1

我将把Vuejs放在一边，因为这种效果只能通过CSS实现。

你可以看一下sparkedhost.com的源代码，以便更好地理解他们是如何实现这个效果的，下面是一个没有任何修饰的例子:

.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;


}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}

<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>