小编ken*_*elf的帖子

如何在页面中间放置"fadein"和"animate"文本？

我想知道是否可以在页面中间分配一组堆叠文本？将它们放置在中心并不太难,但问题是,他们被放置left,right,top,和bottom,我认为意味着他们需要给予:position:absolute.此外,.headline给出了文本fade-in(不透明度0到100)和animation命令.在缩放方面,文本是响应性的,并且随着窗口变小而变小.此外,他们被分配了自己的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;
    } …

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery css3

ken*_*elf

2014 11-21

5
推荐指数

1
解决办法

135
查看次数