从一条线后面揭示两个文本元素
从一条线后面揭示两个文本元素
提问于 2019-11-26 21:17:11
什么是正确的方式来动画两个文本元素，以使他们似乎是从一条线后面的启示？
一个从上面，另一个从底部。
这是一个代码：
//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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-26 21:37:03
您可以从它们的容器中使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59059451
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号