我正在尝试使用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;
}`
最佳答案
如果我理解正确，则需要更改-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>关于css - 使用CSS3的字幕效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27677926/