html - CSS选框，如何使文本从底部移动到顶部

Question

我完全使用 css 制作了选取框。这是 jsfiddle它的。但我希望文本从下往上移动。目前它正在从左向右移动。我怎样才能让它从下往上移动？

CSS

/* define the animation */
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(-100%, 0); }
} 

@-moz-keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* define your limiting container */
.marquee {
  border: solid 2px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
  -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

HTML

<p class="marquee">
    <span>
        Hey! What's up? <br />
        Second Line <br />
        Third Line <br />
        Fourth Line <br />
        Fifth Line <br /    
    </span>

Answer 1

删除 padding-left: 100%; 并像这样调整 transform

@keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(0, -100%); }
} 

Demo

解释:0, 0 分别表示 x 轴和 y 轴，所以不用 (0,0) 来代替 (-100%,0) 这只是你在 x 轴上移动文本，将 -100% 移到 y 轴并摆脱padding-left: 100%; in .marquee span

---

正如您评论说要在加载时显示 1-2 行然后开始滚动，因此为容器元素提供一些 height 并使用 padding-top 或你可以为你的 span 元素使用 margin-top

Demo 2

此外，@harry在他的评论中提出了类似的建议，take a look