Question

https://www.awwwards.com/inspiration/gifs-and-marquee-animation-by-max-siedentopf

这是我想要重新创建的。我是编码新手。

说实话，我唯一能做的部分就是底部，这很简单，但是我不知道如何对垂直文本使用marquee标签，以及如何使其看起来无缝并使其运行“ OPEN 24 / 7无限次。

这就是我目前所拥有的：

.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

在下面是code。

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>

如何使用选取框标记在网站周围创建动画边框？

1 个答案: