CSS选取框不显示所有数据

Question

我有一个简单的CSS选框滚动数据，效果很好，但它在大约10行之后停止显示数据。如果我把它做得更大，那只会弄乱页面。

代码：

<div class="col-sm-2">
    <h3>AREAS COVERED</h3><h5><div class="microsoft areas">
    <p class="marquee"><? echo $areas ?></p>
</div>

CSS：

.areas {
    width: 100px;
    height: 140px;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 0px;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}

/* Make it look pretty */
.microsoft .marquee {
    margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before, .microsoft::before,
.microsoft:after,  .microsoft::after {
    left: 0;
    z-index: 1;
    content: '';
    position: absolute;
    pointer-events: none;
    width: 100%; height: 2em;
    background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}

.microsoft:after, .microsoft::after {
    bottom: 0;
    transform: rotate(180deg);
}

.microsoft:before, .microsoft::before {
    top: 0;

}

areas.php文件大约有100行，格式为：

WestMidlands
WestSussex
WestYorkshire
Wiltshire

它正在加载所有内容，只是停止显示它。我做错了什么？

Answer 1

您的动画应该从top: 100%;转到top: 0; transform: translateY(-100%)。

top: 100%会将选框的顶部放在它的容器底部。

top: 0; transform: translateY(-100%);会将选框的底部放在它的容器顶部。

＆＃13;

＆＃13;

.areas {
  width: 100px;
  height: 140px;
  margin: 1em auto;
  overflow: hidden;
  background: white;
  position: relative;
  box-sizing: border-box;
}

.marquee {
  position: relative;
  box-sizing: border-box;
  animation: marquee 15s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}


/* Make it move! */

@keyframes marquee {
  0% {
    top: 100%;
  }
  100% {
    top: 0;
    transform: translateY(-100%);
  }
}


/* Make it look pretty */

.microsoft .marquee {
  margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before,
.microsoft::before,
.microsoft:after,
.microsoft::after {
  left: 0;
  z-index: 1;
  content: '';
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 2em;
  background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0));
}

.microsoft:after,
.microsoft::after {
  bottom: 0;
  transform: rotate(180deg);
}

.microsoft:before,
.microsoft::before {
  top: 0;
}

＆＃13;

<div class="col-sm-2">
  <h3>AREAS COVERED</h3>
  <div class="microsoft areas">
    <p class="marquee">
      WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire
    </p>
  </div>

＆＃13;

＆＃13;

＆＃13;