我正在尝试对滚动文本(在段落中)进行动画处理,以便它从div的底部移动到顶部,滚动出div(变得不可见),然后循环。以下是相关的 css:
@keyframes showAndScroll {
0% {opacity: 0;}
10% {opacity: 0.85;}
50% {opacity: 0.85;}
60% {opacity: 0;}
100% {opacity: 0;}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
}
@keyframes scroll {
0% {
transform: translateY(600%); color: red;
}
50% {
transform: translateY(-200%); color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
和 html 代码:
<div class="infobar">
<p>
Infobar test
<p>
</div>
我有两个问题:
文本与文档的其余部分重叠。如何使段落在到达其父div 的边缘时不可见?这种效果就是我正在寻找的:http://media02.hongkiat.com/marquee-css3-animation//demo/index2.html
出于某种原因,将段落放在div 的 100% 似乎并没有将其放在div 的"底部"(我目前将其放置在 600%)。这是为什么呢?
任何意见都值得赞赏。这是我的 JSfiddle:https://jsfiddle.net/essi/oqh6ok00/1/
将overflow: hidden;
添加到类.infobar
。通过这种方式,溢出被剪裁,您的动画元素将在边缘内可见,类似于您在链接示例中向我们展示的内容。
@keyframes showAndScroll {
0% {
opacity: 0;
}
10% {
opacity: 0.85;
}
50% {
opacity: 0.85;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
overflow: hidden;
}
@keyframes scroll {
0% {
transform: translateY(600%);
color: red;
}
50% {
transform: translateY(-200%);
color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="infobar">
<p>
Infobar test
<p>
</div>