gpt4 book ai didi

CSS - 有没有更好的方法来创建滚动的重复文本,这些文本在框的边缘出现和消失?

转载 作者:行者123 更新时间:2023-11-28 00:44:57 25 4
gpt4 key购买 nike

.container {
font-family: sans-serif;
font-size: 30px;
position: relative;
/* border: 1px solid #000; */
width: 90%;
margin: 0 auto;
overflow: hidden;
text-align: center;
margin-top: 10px;
}

.individual {
animation: scroll 500ms linear infinite;
}

@keyframes scroll {
100% {
transform: translateY(100%);
}
}

.overlay-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: none;
outline: 20px solid #fff;
outline-offset: -20px;
}

.overlay-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: none;
z-index: 2;
outline: 2px solid #000;
outline-offset: -20px;
}
<div class="container">

<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>

</div>

我正在尝试弄清楚如何重新创建此站点上使用的效果: https://inthecity.strelka.com/en

这是方框中的效果,在滚动列表中一遍又一遍地重复“ session ”这样的词。查看他们的源代码,似乎他们在一系列相同的 div 中重复同一个词,然后使用 transform: translate 在无限循环中为它们设置动画。那部分很简单,但是很难让顶行从框的“外部”进入框,就像底部文本退出框一样,如果这有意义的话。顶行突然出现。

我用一个覆盖框解决了这个问题,该框具有带负偏移的轮廓,就像围绕边缘的内部 mask ,然后是另一个框来提供边框。

但我想知道是否有更简单的方法来解决这个问题?

任何帮助或想法都会很棒,谢谢!

最佳答案

你的问题是这两行:

outline: 20px solid #fff;
outline-offset: -20px;

我已经使用正确的代码实现了下面的代码片段。

.container {
font-family: sans-serif;
font-size: 30px;
position: relative;
/* border: 1px solid #000; */
width: 90%;
overflow: hidden;
text-align: center;
margin-top: 10px;
}

.individual {
animation: scroll 1000ms linear infinite;
}

@keyframes scroll {
100% {
transform: translateY(100%);
}
}

.overlay-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: none;
outline: 50px solid #fff;
outline-offset: -30px;
}

.overlay-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: none;

outline: 2px solid #000;
outline-offset: -20px;
}
<div class="container">

<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
<div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>

</div>

关于CSS - 有没有更好的方法来创建滚动的重复文本,这些文本在框的边缘出现和消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53585698/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com