使用css3的选框效果答案

【问题标题】：Marquee effect using css3使用css3的选框效果
【发布时间】：2014-12-28 15:45:52
【问题描述】：

我正在尝试使用 css3 获得选取框效果。它沿 X 轴工作，但我希望它沿 Y 轴工作，即从下到上。这是我的代码

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="marquee">
    <span>Hi I m ur marquee!!</span>
</h1>
</body>
</html>

CSS

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

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

.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
  }

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

【问题讨论】：

标签： css marquee

【解决方案1】：

如果我理解正确，您需要更改 -webkit-transform:translate(x,y); y 的值以实现连续效果我已将 100% 更改为 50% 并将高度设置为 100%

html,
body,
h1 {
  height: 100%
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate(0, 0%);
  }
  25% {
    -webkit-transform: translate(0, -30%);
  }
  26% {
    opacity:0;
    -webkit-transform: translate(0, 110%);
  }
  27% {
    opacity:1;
    -webkit-transform: translate(0, 110%);
  }
  100% {
    -webkit-transform: translate(0, 0%);
  }
  
}
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-animation: marquee 5s linear infinite;
}
.marquee:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
`

<h1 class="marquee">
    <span>Hi I m ur marquee!!</span>
</h1>

【讨论】：

嗨@Vitorino 非常感谢您的回复。效果几乎可以，但仍然需要2次修改。在这里，文本从下到上移动，到达顶部后又回到底部。我希望它在到达顶部并从底部出现时移出屏幕。像这样codepen.io/aamirafridi/pen/GgoXyy
非常感谢您的时间和精力:)