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 ...

随机推荐

多核服务器的JVM优化选项（转载）
原文链接现在多核CPU是主流.利用多核技术,可以有效发挥硬件的能力,提升吞吐量,对于Java程序,可以实现并发垃圾收集.但是Java利用多核技术也带来了一些问题,主要是多线程共享内存引起了.目前内存 ...
ORACLE MOS 翻译
http://blog.csdn.net/msdnchina/article/details/53174196
唤醒你的大脑 --- javascript冒泡排序
var a; a = [1, 2, 3, 11, 55, 5, 0, 44]; (function bubbleSort() { for (var i = 0; i <= a.length - ...
移除array中重复的item
//move the repeated item NSInteger index = [orignalArray count] - 1; for (id o ...
Code Sign error: a valid provisioning profile matching the application's Identifier 'com. sensoSource.VoiceRecorder' could not be found
如果不是com. sensoSource.VoiceRecorder,在xxx-info.plist里Bundle identifier里替换成你的证书名 xxx是你的工程名在Bundle iden ...
openfire Android学习(二)----对分组、好友和头像等一些操作
一.查询所有分组通过Roster来获取所有分组,Roster可以通过connection.getRoster()来得到. [java] view plaincopy /** * 获取所有组 * * ...
Android 存储（本地存储 SD卡存储 SharedPreference SQLite ContentProvider）
本文出自:http://blog.csdn.net/dt235201314/article/details/73176149 源码下载欢迎Star(updating):https://github.c ...
System::String *,char*,string 等的类型转换 [转]
在VC 的编程中,经常会用到各种类型的转换,在MFC中textbox等控件得到的返回类型是System::String *,而写入的文件要求是 const char *类型的,下面介绍一些转换的方法: ...
const mutable
在C++中,由const修饰的成员函数的函数体内部,是不能够对成员变量进行修改的.这个特性被用来保证某些成员函数在实现过程中,避免由于程序员大意而对数据进行了错误的修改:同时也说明此成员函数是非修改性 ...
自己定义一个Dialog样式的Activity窗体，切换到Dialog的方法
首先定义一个style 在style里面加入 <style name="MyDialog" parent="@android:Theme.Dialog"& ...

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

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

随机推荐

热门专题