Question

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

的index.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;
 }`

Answer 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>

使用css3的选框效果

1 个答案: