个人中心
gpt4 book ai didi

javascript - 如何将 'fadein' 和 'animate' 文本放在页面中间？

转载 作者：太空狗 更新时间：2023-10-29 16:41:39 25 4
gpt4 key购买 nike

我想知道是否可以在页面中间分配一组堆叠文本？将它们放在中心并不太难，但问题是它们位于 left、right、top 和 bottom，我认为这意味着他们需要被赋予:position:absolute。此外，.headline 文本被赋予淡入(不透明度 0 到 100)和动画 命令。在缩放方面，文本是响应式的，并且随着窗口变小而变小。此外，它们还被分配了自己的 z-index。

在下图中，我已经列出了我想要实现的整体结构，但是由于我想要实现的文本行为，我在这样做时遇到了很多困难。

enter image description here

对于功能引用，这里是一个 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？

fiddle here .

您还提到了行之间的“填充”百分比。请注意，作为百分比的 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;
}

fiddle

我知道了 here .

关于javascript - 如何将 'fadein' 和 'animate' 文本放在页面中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27053404/

25 4 0
文章推荐： Android - LocationManager 的位置与 GoogleMaps 不同
文章推荐： c - bonjour 如何发现网络上的设备？
文章推荐： java - Robotium:有没有办法列出屏幕/Activity 上所有元素的标签/ID？
文章推荐： c - sizeof(long long) != 8 的架构/ABI