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 ...
随机推荐
- Concurrency and Application Design (一)
在计算机发展的早期,单位工作时间的最高限额是一台计算机可以执行通过CPU的时钟速度确定.但是,随着技术的进步和处理器设计变得更紧凑,热等物理约束开始限制处理器的最高时钟速度.因此,芯片制造商寻找其它的 ...
- IOS开发之----两种保存用户名和密码实现记住密码库
使用Keychain存储用户敏感信息 iOS的keychain服务提供了一种安全的保存私密信息(密码,序列号,证书等)的方式,每个ios程序都有一个独立的keychain存储.相对于 NSUserDe ...
- G - Specialized Four-Digit Numbers(1.5.2)
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...
- Spring的Scheme位置
org.springframework.aop.config org.springframework.contex.config org.springframework.ejb.config org. ...
- mysqldump导入导出详解
mysqldump可以指定路径的,如果没指定路径,而只写了文件名的话,那么就在当前进入mysql命令行所在的目录,也就是mysql安装目录下 mysqldump --default-characte ...
- MYSQL主从不同步延迟原理分析及解决方案
1. MySQL数据库主从同步延迟原理.要说延时原理,得从mysql的数据库主从复制原理说起,mysql的主从复制都是单线程的操作,主库对所有DDL和DML产生binlog,binlog是顺序写,所以 ...
- AVL平衡树的插入例程
/* **AVL平衡树插入例程 **2014-5-30 11:44:50 */ avlTree insert(elementType X, avlTree T){ if(T == NULL){ T = ...
- windows下检验caffe是否配置正确
windows下检验caffe是否配置正确:(注:不考虑搭建caffe的编译环境,而是直接使用caffe官网提供的二进制文件) windows版本源码以及二进制库文件下载地址:https://gith ...
- 如何学习Java？
一点感悟 java作为一门编程语言,在各类编程语言中作为弄潮儿始终排在前三的位置,这充分肯定了java语言的魅力,在实际项目应用中,我们已经无法脱离javaa(Ps当然你可以选择不使用),但它的高性能 ...
- bzoj1458 士兵占据
1458: 士兵占据 Time Limit: 10 Sec Memory Limit: 64 MB Submit: 685 Solved: 398 [Submit][Status][id=1458 ...