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

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

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

（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. Classical method of machine learning

    PCA principal components analysis kmeans bayes spectral clustering svm EM hidden Markov models deep ...

  2. Android 源码编译记录

    问题1:Can't locate Switch.pm in @INC (you may need to install the Switch module) (@INC contains: /etc/ ...

  3. OpenGL step to step(2)

    这是一个类似于地球绕太阳旋转的demo 原有的例子是用键盘接受事件,我做了修改,使用了timer把他变成一个动态旋转的 #import <Foundation/Foundation.h> ...

  4. mac 下配置 protobuf golang插件 并使用

    介绍 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准Protocol Buffers 是一种轻便高效的结构化数据存储格式 可以用 ...

  5. 怎样在ubuntu 系统上为 php 加上 redis 扩展

    近期一个项目.,想用redis 作为数据库,php是不待redis 扩展,必须安装,怎么安装呢?我在网上找的非常多资料发现都是预编译的.但都没成功.于是就找了第二种方法是不须要编译直接安装就能够了. ...

  6. windows 平台 ffmeg h264 硬编码

    本文讲述windows 平台下ffmpeg如何利用intel media SDK 进行 h264硬编码(测试版本为3.2.2). ffmeg硬编编码的流程与软件编码流程相同,唯一不同的地方在初始化en ...

  7. 将iconv编译成lua接口

    前一篇博文说了.在cocos2dx中怎么样使用iconv转码,这节我们将上一节中写的转码函数,做成一个lua接口.在lua脚本中使用. 网上能够下载到luaconv.可是编译的时候总是报错,所以自己写 ...

  8. idea自动注入和自动编译

    ---恢复内容开始--- 自动编译也就是时时编译,当我们写错代码的时候,idea能够马上报错,这个是不错的功能. 安装操作看下图: 下面这个功能的作用就是,如果你不修改的话,你的项目可以正常运行,但是 ...

  9. LeetCode求能够装得最多的水

    费了半天劲还是没想出来,然后跑到网上找答案,明白了是怎么回事儿了,就是不知道为啥自己没有想出来. 明天再搞~~~ 国庆快乐~~~ 一年了~~~~~ 明年今日~~我会在哪儿 =====2017.9.30 ...

  10. vue 生命周期钩子

    每个vue实例被创建时都会经历一系列初始化的过程,像是一个生命从无到有的过程,所以叫生命周期,而这个过程都有对应的不同阶段,也就对应了生命周期不同的钩子函数,这些生命周期函数,作为vue实例的属性使用 ...