如何使用marquee标签创建网站周围的动画边框？

Question

https:/www.awwwards.cominspirationgifs-and-marquee-animation-by-max-siedentopf

这就是我想重新制作的东西。我是新的编码。

老实说，我唯一能做的是底部，这很简单，但我不知道如何在垂直文本中使用marquee标签，以及使其看起来无缝，并使其运行 "OPEN 247 "无限量的次数。

这是我目前所掌握的全部内容。

.open {
  bottom: 10px;
  position: fixed;
  font-size: 70px;
  right: 10px;
  margin-left: 0%;
}

<p>
      <marquee class="open" width="90%"> OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp; OPEN 24/7 &nbsp;</marquee>
    </p>

Answer 1

在这里，它是 编码 在下面的。

body {
margin: 0;
padding: 0;
color: black;
font-size: 144px;
font-weight: bold;
}
.marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 200px;
overflow-x: hidden;
}
.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

<div class="marquee">
<div class="track">
<div class="content">Open 24/7 Open 24/7 Open 24/7 Open 24/7</div>
</div>
</div>