我正在为客户构建登陆页面。他们的 Logo 以公司口号为中心,正下方是公司口号,目前口号会在页面加载时淡出。
他们现在问是否可以将标语动画化,使其看起来像是在写出来而不是淡入。有人知道如何实现这种效果吗?我很难过。
如有任何帮助,我们将不胜感激。
HTML:
<div class="image-wrapper">
<a href="home.html">
<img src="images/landing_logo2.png" />
</a>
<div id="test">
<p>enter the sunshine state</p>
</div>
</div>
CSS:
div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
display: block;
}
#test {
position: absolute;
top: 100%;
width: 100%;
}
#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #fff;
margin-top: -40px;
-webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 8s; /* Firefox < 16 */
-ms-animation: fadein 8s; /* Internet Explorer */
-o-animation: fadein 8s; /* Opera < 12.1 */
animation: fadein 8s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
我附上了一个 JSFiddle:
最佳答案
无需使用外部库,您只需使用这种方法即可。
var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
(function(i) {
setTimeout(function() {
$('#test > p').text(slogan.substring(0, i + 1));
}, 100 * i);
}(i));
}
@font-face {
font-family: segoe;
src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
display: block;
}
#test {
position: absolute;
top: 100%;
width: 100%;
text-align: center;
}
#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #000;
margin-top: -40px;
-webkit-animation: fadein 8s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 8s;
/* Firefox < 16 */
-ms-animation: fadein 8s;
/* Internet Explorer */
-o-animation: fadein 8s;
/* Opera < 12.1 */
animation: fadein 8s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-wrapper">
<a href="home.html">
<img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
</a>
<div id="test">
<p>enter the sunshine state</p>
</div>
</div>
如果文本在片段中不可见 here是 fiddle
关于javascript - CSS 文本写出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32115034/