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 ...
随机推荐
- [原创][FPGA]有限状态机FSM学习笔记（一）
1. 概述--何为有限状态机FSM? 有限状态机-Finite State Machine,简写为FSM,是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常 ...
- css查缺补漏1
css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...
- linux mysql添加用户名并实现远程访问
第一步:登陆linux,在终端登陆mysql #mysql -u root -p 第二步:查询系统用户列表并进行添加用户 mysql>select host,user,password from ...
- 设置NSZombieEnabled和MallocStackLogging
在XCode.4以上版本号中,设置NSZombieEnabled和MallocStackLogging 1.点击XCode的Product菜单.选择Edit Scheme...选项 2.选择左側的Ru ...
- Basic Vim Configuration
原文: https://computers.tutsplus.com/tutorials/basic-vim-configuration--cms-21498 原来,vim的配置文件,.vimrc也是 ...
- react 自定义 TabBar 组件
1.创建 组件 src/components/TabBar/index.js /** * TabBar 组件 */ import React ,{ PureComponent } from 'reac ...
- react-redux 和 redux-saga 小结
react-redux 将 store 绑定到 props 上,便于全局调用. redux-saga 是将 redux 的同步转换为异步. 注: dispatch 到 saga , saga 匹配行为 ...
- 安装odoo 9实录
安装Ubuntu,省略 下载 odoo源码 使用 git 下载源码 mkdir /opt/openerp/server cd /opt/openerp/server git clone https:/ ...
- AngularJs 常用
Angularjs开发一些经验总结:http://www.cnblogs.com/whitewolf/archive/2013/03/24/2979344.html 七步从AngularJS菜鸟到专家 ...
- kubernetes调度之污点(taint)和容忍(toleration)
系列目录 节点亲和性(affinity),是节点的一种属性,让符合条件的pod亲附于它(倾向于或者硬性要求).污点是一种相反的行为,它会使pod抗拒此节点(即pod调度的时候不被调度到此节点) 污点和 ...