javascript - 从一行后面显示两个文本元素
问题描述
对两个文本元素进行动画处理的正确方法是什么,以便它们看起来像是从一条线后面显示出来的?
一个从上面,另一个从底部。
这是一个代码:
//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
将整个事物居中,并p
从div
容器中调整文本大小也可以提供帮助。您可以删除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>
推荐阅读
- mysql - mysql - 如何在具有不同定义的列上拥有外键
- java - 如何调用和显示
- javascript - 带有子项的 Material UI 菜单不会关闭整个菜单
- css - 渐变背景溢出边框
- unity3d - 我可以在 Unity 中制作一款适用于所有 PC VR 设备(Oculus、HTC VIVE)的 VR 游戏吗
- javascript - 如何访问动态对象键
- gcloud - Google Cloud AI Platform:我无法使用“--accelerator”参数创建模型版本
- angular - 如何仅将背景图像添加到登录页面
- c# - 在 VFP 表单中添加时 C# Winform ActiveX 错误
- java - javers anyDomainObject 方法给出异常