今天有空把前几天学的东西发一下，都是一些简单的东西，但是千里之行始于足下，我虽然走的慢，但是未停下前进的脚步~~~~~~~
下来看下我做的“淡入的文字”最终动态效果：
上面这个动画效果制作的过程是：
（1）先自定义一个透明度从0到1变化的动画，然后在animation中调用这个动画效果
（2）注意不同行文字出现的时间先后，这个通过animation中延时属性可以实现
（3）规定文字最终动态为动画的最终显示状态，否则文字显示完会自动消失，这个用animation-fill-mode可以实现
一、先来看看HTML中程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淡入的文字</title>
<link type="text/css" rel="stylesheet" href="css/animate.css" />
</head>
<body>
<div class="fade-in-words">
<div class="first-words">山一程，水一程，</div>
<div class="second-words">身向榆关那畔行，</div>
<div class="third-words">夜深千帐灯。</div>
<div class="four-words">风一更，雪一更，</div>
<div class="five-words">聒碎乡心梦不成，</div>
<div class="six-words">故园无此声。</div>
</div>
</body>
</html>
上面这段程序主要是先把文字呈现出来，我随便找了一首诗啦~~~~~大家不要去猜它的意思QAQ
二、看看CSS样式（主要是CSS3）
.fade-in-words{
width: 200px;
margin: 0 auto;
text-align: center;
}
/*自定义一个透明度从0到1的动画，它的名称是fade-in*/
@keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-webkit-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-ms-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-o-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-moz-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
.first-words{
opacity: 0; /*实先规定文字的状态是不显示的*/
animation: fade-in 4s ease 0s 1; /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
-webkit-animation: fade-in 4s ease 0s 1;
-moz-animation: fade-in 4s ease 0s 1;
-o-animation: fade-in 4s ease 0s 1;
-ms-animation: fade-in 4s ease 0s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.second-words{
opacity: 0;
animation: fade-in 4s ease 2s 1;
-webkit-animation: fade-in 4s ease 2s 1;
-moz-animation: fade-in 4s ease 2s 1;
-o-animation: fade-in 4s ease 2s 1;
-ms-animation: fade-in 4s ease 2s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.third-words{
opacity: 0;
animation: fade-in 4s ease 4s 1;
-webkit-animation: fade-in 4s ease 4s 1;
-moz-animation: fade-in 4s ease 4s 1;
-o-animation: fade-in 4s ease 4s 1;
-ms-animation: fade-in 4s ease 4s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.four-words{
opacity: 0;
animation: fade-in 4s ease 6s 1;
-webkit-animation: fade-in 4s ease 6s 1;
-moz-animation: fade-in 4s ease 6s 1;
-o-animation: fade-in 4s ease 6s 1;
-ms-animation: fade-in 4s ease 6s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.five-words{
opacity: 0;
animation: fade-in 4s ease 8s 1;
-webkit-animation: fade-in 4s ease 8s 1;
-moz-animation: fade-in 4s ease 8s 1;
-o-animation: fade-in 4s ease 8s 1;
-ms-animation: fade-in 4s ease 8s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.six-words{
opacity: 0;
animation: fade-in 4s ease 10s 1;
-webkit-animation: fade-in 4s ease 10s 1;
-moz-animation: fade-in 4s ease 10s 1;
-o-animation: fade-in 4s ease 10s 1;
-ms-animation: fade-in 4s ease 10s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
上面的程序我在注释里面都写得很清楚，感兴趣的可以看我写的注释，我觉得比较简单，没有难度，但是需要注意浏览器前缀的添加，否则你懂得~~~~
时间： 2024-10-16 07:43:32