我该怎么把'fadein＆＃39;和＃39; animate＆＃39;页面中间的文字？

时间：2014-11-21 02:58:31

标签： javascript jquery html css css3

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

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

enter image description here

有关功能参考，请参阅jsfiddle。

请帮助我，并提前感谢你！请注意，我更喜欢使用CSS，因为它只是一个简单的函数，只在页面加载时出现一次。但是，如果这是只有javascript可以解决的问题，请告诉我：）

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

adeneo在评论中提供的解决方案可能完美无缺，但由于您的布局是严格垂直的，为什么不使用block布局而不是inline-block或float？

<强> fiddle here

你也提到了行之间的“填充”百分比。请注意，margin和padding css属性作为百分比将关闭 width 而不是 height 。我放置了div来解决这个问题，但 there are other solutions 。

修改

如果headline需要垂直居中于页面，这里使用“ghost元素技术”这是一种很好的方法：

/* 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 。

相关问题
最新问题