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;

}

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

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

CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
CSS3学习笔记（3）—左右飞入的文字
前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软 ...
[CSS3]学习笔记-文字与字体相关样式
1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
十天精通CSS3学习笔记 part1
http://www.imooc.com/learn/33 第1章初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...
HTML5+CSS3学习笔记（二）页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

2017 ACM-ICPC 北京区域赛记录
------------------------------------------------------------------------------ 出发日拖着一个大箱子走是真的累. 下午三 ...
Java生成GUID的方法
其实在Java上已经换了一个说法,叫做UUID,方法如下: java.util.UUID.randomUUID()
app 检查更新和更新
第一种,手动检查 //// Harpy.h// Harpy//// Created by Arthur Ariel Sabintsev on 11/14/12.// Copyright (c) ...
GOF 23种设计摩搜-建造者模式
• 场景: – 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样一个问题需要处理: • 装配这些子组件是不是有个步骤问题? – 实际开发中,我们所需要的对象构建时 ...
AngularJS：实现动态添加输入控件功能
功能要求如下:1. 点击加号可以增加输入框.2. 点击减号可以减少输入框.3. 当输入框只有一个的时候,不能再减少输入框.效果图如下:只有一个输入框有多个输入框要实现这个功能,可以 ...
cache数据库之表的存储结构
1.我们已经建了一个person类,接下来就是表的存储结构 2.打开Inspector,先输入rowid名字为p_RowID,选class->Storage 3.新建一个Storage,选择Ca ...
【LeetCode-面试算法经典-Java实现】【002-Add Two Numbers (单链表表示的两个数相加)】
[002-Add Two Numbers (单链表表示的两个数相加)] 原题 You are given two linked lists representing two non-negative ...
servelet
获取页面传递过来的参数. 调用后台代码实现相关业务逻辑. 根据返回结果,进行页面跳转. 问题:httpsession? 拆解: String 里面的.spllit方法.拆开后,返回值为string ...
C#动态编译dll或exe
string strCode = @" using System; using System.Text; using System.Collections.Generic; using Sy ...
Allegro布线基本操作
转:allegro基本步骤常见问题 cadence16.5中电源线.地线取消飞线显示目录: 一.Allegro基本技巧 1.关闭电源和地网络的飞线 2.开启特定NET飞线 3.元器件快速对齐(待完 ...

CSS3学习笔记（1）—淡入的文字

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

随机推荐

热门专题