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%;轴，摆脱.marquee span中的height

当你评论想要在加载时显示1-2行然后开始滚动时，为容器元素提供一些padding-top并使用margin-top或者你可以使用span对于您的{{1}}元素，例如

Demo 2

另外，@harry在他的评论take a look

中提出了类似建议

CSS选取框，如何使文本从下到上移动

1 个答案: