为两个文本元素添加动画效果的正确方法是什么，使它们看起来像是从一条线后面显露出来？
一个在上面，一个在下面。
代码如下:
//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");
document.getElementById("tutorialSubText").classList.add("paused");
//after 3 seconds initiate the animation
setTimeout(function(){
document.getElementById("tutorialText").classList.add("played");
document.getElementById("tutorialSubText").classList.add("played");
}, 3000)html{
overflow:hidden;
}
.mainTexts{
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: rgb(242, 242, 242);
left: 18.5vw;
top: 15vh;
animation: rollUp 0.5s ease-out ;
animation-fill-mode: forwards;
}
.subTexts{
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 3vw;
color: rgb(217, 217, 217);
left: 20vw;
top: 40vh;
animation: rollDown 0.5s ease-out ;
animation-fill-mode: forwards;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 60vh;
}
@-webkit-keyframes rollUp {
from { top: 55vh }
to { top: 0vh }
}
@-webkit-keyframes rollDown {
from { top: -45vh }
to { top: 60vh }
}
.paused {
-webkit-animation-play-state: paused !important;
}
.played {
-webkit-animation-play-state: running !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p id="tutorialText" class="mainTexts">Tutorial</p>
</div>
<hr/>
<div >
<p id="tutorialSubText" class="subTexts">Learn a new sentence</p>
</div>
</body>
</html>最佳答案
您可以从他们的容器中使用overflow:hidden。除此之外，flex 使整个内容居中，并与 div 容器中的 p 调整大小文本也有帮助。您可以删除幻灯片的 vw/vh 值并使用百分比。
一种方法:
//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");
document.getElementById("tutorialSubText").classList.add("paused");
//after 3 seconds initiate the animation
setTimeout(function() {
document.getElementById("tutorialText").classList.add("played");
document.getElementById("tutorialSubText").classList.add("played");
}, 3000)html {
overflow: hidden;
display: flex;/* settings preparing to center content*/
height: 100vh;
flex-direction: column;
}
body {
margin: auto 5vw;/* one way for flex child vertical centering */
}
.mainTexts {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: rgb(242, 242, 242);
top: 0;/* size them via coordonates related to the relative parent */
left: 0;
bottom: 0;
right: 0;
margin: auto 0;
animation: rollUp 0.5s ease-out;
animation-fill-mode: forwards;
}
.subTexts {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 3vw;
color: rgb(217, 217, 217);
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
animation: rollDown 0.5s ease-out;
animation-fill-mode: forwards;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
}
@-webkit-keyframes rollUp {
from {
top: 150%
}
to {
top: 0vh
}
}
@-webkit-keyframes rollDown {
from {
top: -150%
}
to {
top: 0
}
}
.paused {
-webkit-animation-play-state: paused !important;
}
.played {
-webkit-animation-play-state: running !important;
}
body{
background: black
}
div {/* size parents and make them reference */
overflow: hidden;
position: relative;
height: 7.5vw;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p id="tutorialText" class="mainTexts">Tutorial</p>
</div>
<hr/>
<div>
<p id="tutorialSubText" class="subTexts">Learn a new sentence</p>
</div>
</body>
</html>关于javascript - 从一行后面显示两个文本元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59059451/