我想知道是否可以在页面中间分配一组堆叠文本？将它们放在中心并不太难，但问题是它们位于 left、right、top 和 bottom，我认为这意味着他们需要被赋予:position:absolute。此外，.headline 文本被赋予淡入(不透明度 0 到 100)和动画 命令。在缩放方面，文本是响应式的，并且随着窗口变小而变小。此外，它们还被分配了自己的 z-index。
在下图中，我已经列出了我想要实现的整体结构，但是由于我想要实现的文本行为，我在这样做时遇到了很多困难。
对于功能引用，这里是一个 jsfiddle .
请帮助我并提前谢谢你!请注意，我宁愿只使用 CSS，因为它是一个只在页面加载时出现一次的简单函数。但是，如果这是只有 javascript 才能解决的问题，请告诉我:)
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.fade {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
@-webkit-keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
@keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
@-webkit-keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
@keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
@-webkit-keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
@keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.flow {
display: inline-block;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
-webkit-animation-name: flowright;
animation-name: flowright;
}
.left {
-webkit-animation-name: flowleft;
animation-name: flowleft;
}
.up {
-webkit-animation-name: flowup;
animation-name: flowup;
}
.down {
-webkit-animation-name: flowdown;
animation-name: flowdown;
}
.sequence01 {
-webkit-animation-delay: 0.1s;
}
.sequence02 {
-webkit-animation-delay: 0.2s;
}
.sequence03 {
-webkit-animation-delay: 0.3s;
}
.sequence04 {
-webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */
.row01, .row02, .row03 {
clear: both;
}
.row01 {
left:20%;
top: 0;
position: relative;
}
.row02 {
right:10%;
top: 50%;
position: relative;
}
.row03 {
left:10%;
top: 100%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
}
.pagewrap {
height: 100%;
width: 80%;
max-width: 48em;
margin: 0 auto;
background-color: #fff6d6;
}<body>
<div class="pagewrap">
<div class="headline">
<div class="row01 flow left sequence01">ROW 01</div>
<br/>
<div class="row02 flow right sequence02">ROW 02</div>
<br/>
<div class="row03 flow up sequence03">ROW 03</div>
</div>
</div>
</body>最佳答案
adeneo 在评论中给出的解决方案可能工作得很好，但由于您的布局是严格垂直的，为什么不使用 block 布局而不是 inline-block还是 float？
您还提到了行之间的“填充”百分比。请注意，作为百分比的 margin 和 padding css 属性将关闭 width 而不是 高度。我放置 div 来解决这个问题，但是 there are other solutions .
编辑
如果 headline 需要垂直居中于页面，这里有一个使用“幽灵元素技术”的巧妙方法:
/* Headline Typography */
.wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.headline {
display: inline-block;
width: 100%;
vertical-align: middle;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
我知道了 here .
关于javascript - 如何将 'fadein' 和 'animate' 文本放在页面中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27053404/