你的位置:首页 > 网页设计

[网页设计]CSS3学习笔记(1)—淡入的文字


今天有空把前几天学的东西发一下,都是一些简单的东西,但是千里之行始于足下,我虽然走的慢,但是未停下前进的脚步~~~~~~~

下来看下我做的“淡入的文字”最终动态效果:

上面这个动画效果制作的过程是:

(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; }

上面的程序我在注释里面都写得很清楚,感兴趣的可以看我写的注释,我觉得比较简单,没有难度,但是需要注意浏览器前缀的添加,否则你懂得~~~~