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 ...
随机推荐
- (42)C#Stopwatch类（计算程序运行时间）
引入命名空间 using System.Diagnostics; static void Main(string[] args) { Stopwatch sw = new Stopwatch(); s ...
- SourceTree免注册并连码云
1 在C:\Users\用户\AppData\Local\Atlassian\SourceTree目录下新建 accounts.json 其中AppData是隐藏文件夹 2 输入 [ { " ...
- IOS开发之----两种保存用户名和密码实现记住密码库
使用Keychain存储用户敏感信息 iOS的keychain服务提供了一种安全的保存私密信息(密码,序列号,证书等)的方式,每个ios程序都有一个独立的keychain存储.相对于 NSUserDe ...
- CodeSign error: code signing is required for product type 'Application' in SDK 'iOS 7.0'
这个一般是证书设置的问题, 在build settings中找到 Code Signing->Code Signing Identity修改成有效的证书即可
- Excel导入的HDR=YES; IMEX=1详解
参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不是标题,做为数据来使用.系统默认的是YES 参数Excel 8.0对于Excel 97以上版本都 ...
- intellij idea 的常用有用快捷键
ctrl + R:替换(这一点和office 中的ctrl + H不一样) ctrl + alt + L:自动整理代码(不会整理注释文件) ctrl + alt:(自动导入包,不能批量导入,有人评论批 ...
- Android系统开发（6）——Linux底层输入输出
一.操作系统的体系结构 计算机是由一堆硬件组成的,操作系统是为了有效的控制这些硬件资源的软件.操作系统除了有效地控制这些硬件资源的分配.并提供计算机执行所须要的功能之外,为了提供程序猿更easy开发软 ...
- soapUI学习笔记---断言的小使用
转自:http://www.cnblogs.com/duimianyoushan/p/4274791.html 以下示例在soapUI 4.5中进行.刚开始学soapUI的使用,记录下以免忘记 1.创 ...
- laravel 将数组转化成字符串 再把字符串转化成数组
这是在给阮少翔改代码的时候用的方法, 开始的数据用explored转化成数组不是想要的结果, 我就自己写了一个方法把有用的信息提取出来拼接成一个字符串, 再用explored将字符串转化成数组. ...
- 求两个有序数组的中位数（4. Median of Two Sorted Arrays）
先吐槽一下,我好气啊,想了很久硬是没有做出来,题目要求的时间复杂度为O(log(m+n)),我猜到了要用二分法,但是没有想到点子上去.然后上网搜了一下答案,感觉好有罪恶感. 题目原型 正确的思路是:把 ...