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

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

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

（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;

}

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

CSS3学习笔记（1）—淡入的文字的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. CSS3学习笔记（3）—左右飞入的文字

    前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦 下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软 ...

  4. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  9. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. spring mvc 编写处理带参数的Controller

    在上一随笔记录的基础上,现记录编写处理带有参数的Controller. @Controller //这个注解会告知<context:component:scan> 将HomeControl ...

  2. Java-ArrayList使用技巧---从第一个List中去除所有第二个List中与之重复的元素

    需求:从 mAllList 中去除所有 mSubList 中与之重复的元素 测试数据:mAllList 中包含100000个无序无重复字符串,mSubList 中包含50000个无序无重复字符串 方法 ...

  3. Oracle内部latch获取函数简介

      标签: oracle call 函数   oracle statpack   转自: http://blog.51cto.com/458302/998775 Oracle的内部函数一直非常神秘,其 ...

  4. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  5. 017.View与窗口：AttachInfo

    每一个View都需要依赖于窗口来显示,而View和窗口的关系则是放在View.AttachInfo中,关于View.AttachInfo的文章少,因为这个是View的内部类而且不是公共的,在应用层用的 ...

  6. 【层次查询】Hierarchical Queries之亲兄弟间的排序（ORDER SIBLINGS BY）

    http://blog.itpub.net/519536/viewspace-624176 有关层次查询之前的文章参考如下. [层次查询]Hierarchical Queries之"树的遍历 ...

  7. Unable to satisfy the following requirements解决方式

    今天从git上面download我们项目,然后向往常一样安装Cocoapods.可是却突然发现报错了,尝试了几遍.发现一直报错. 然后我这才看了一下,安装Cocoapods的日志,发现抛出了一个报错. ...

  8. python（14）- 简单练习：登录账户失败三次，账户自动锁定

    题目需求:   1.输入用户名密码   2.认证成功后显示欢迎信息   3.输错三次后锁定 #读取注册用户的信息,用户名,密码,输错次数,写入字典中 user={} with open("D ...

  9. ORCAD元件属性白色区域和黄色区域的理解

    白色部分为instance属性,黄色部分为occurence 属性 在平坦式电路中,黄色部分是默认不显示的. 在层次式电路中,黄色部分会显示.      如果这两个区域的Reference不同,以黄色 ...

  10. 最简单的基于FFmpeg的移动端样例附件：SDL Android HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...