以一首骆宾王的《咏鹅》为例,制作一个css3动画文字效果,文字动画规则:从左向右缓慢进入,并且文字从透明再过渡到不透明,另外每段话完了后,有个时间间隔,也就是延时多少秒再开始动画。
第一步,先布局,设置一个width=540px,height=960px的div元素.box,并且居中显示。
<div class="box">
<div class="sc">
<h2>《咏鹅》</h2>
<span>唐 骆宾王</span>
<div class="jz">
<p>鹅,鹅,鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
</div>
</div>
</div>
标题和作者部分是固定的,css动画部分只应用在中间诗句当中,所以再单独写一个类名为jz的div盒子。
第二步,设置诗句的基本属性,字体大小,文字间隔,以及初始位置transform: translate(0)
.sc p {
font-size: 28px;
line-height: 50px;
letter-spacing: .2em;
transform: translate(0);
}
第三步,添加css3动画animation
这里我应用了animation简写属性,简写的语法如下:
animation: example1 3s ease-out 1s backwards
第四步,使用@keyframes规则,创建动画
创建动画是通过逐步改变从一个CSS样式设定到另一个。指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。0%是开头动画,100%是当动画完成。
第一个动画example1 :
0% {
transform:translate(-60px);
opacity:0;
}
50% {
transform:translate(-30px);
opacity:.5;
}
100% {
transform:translate(0);
opacity:1;
}
0%动画开始,从左偏移位置为-60px,透明度为0,逐渐过渡到50%的时候,左偏移位置在-30px,半透明,最后是100%动画结束,偏移位置为0,文字不透明。
第二个动画example2 :
@keyframes example2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:1;
}
}
最后一个动画示例是有一个文字闪烁的效果,所以在动画40%-60%的时候,来回切换透明度。
完整的CSS代码如下:
.box{ width:540px; height:960px; margin:auto;background: url(bg.jpg) no-repeat;background-size: 540px;}
.sc{ width:600px; height:600px; text-align:center; position:absolute; top:50%;left:50%; margin-top:-300px; margin-left:-300px}
.sc h2{ font-size: 42px; margin:20px 0}
.sc span{ color:#999; font-size: 20px; margin:20px 0; display:block}
.sc p{ font-size: 28px; line-height: 50px; letter-spacing:.2em;transform: translate(0);}
.sc p:nth-child(1){animation: example1 3s ease-out 1s backwards; }
.sc p:nth-child(2){animation: example1 3s ease-out 4s backwards;}
.sc p:nth-child(3){animation: example1 5s ease-in-out 7s backwards; }
.sc p:nth-child(4){animation: example2 5s ease-in-out 11s backwards; }
@keyframes example1 {
0% {
transform:translate(-60px);
opacity:0;
}
50% {
transform:translate(-30px);
opacity:.5;
}
100% {
transform:translate(0);
opacity:1;
}
}
@keyframes example2 {
0% {
opacity:0;
}
40% {
opacity:.8;
}
45% {
opacity:.3;
}
50% {
opacity:.8;
}
55% {
opacity:.3;
}
60% {
opacity:.8;
}
100% {
opacity:1;
}
}
原文地址:CSS3动画制作文字效果