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

随机推荐

板子-GOD BLESS ALL OF YOU
字符串: KMP #include<cstdio> #include<cstring> ; ]; ]; int l1,l2; void get_next() { next[]= ...
CEF General Usage(CEF3预览)
CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Framework,是一个基于Google Chromium 的开源项目.Google Chro ...
iphone坐标系统
1,基本概念 CGPoint{x,y};空间中的位置,通过x和y坐标定义 CGSize{width, height}; 大小,通过宽度和高度定义 CGRect{origin, size};位置和大小, ...
WebLogic 11g重置用户密码
weblogic安装后,很久不用,忘记访问控制台的用户名或者密码,可通过以下步骤来重置用户名密码. 版本:WebLogic Server 11g 说明:%DOMAIN_HOME%:指WebLogic ...
[转]Go的50坑：新Golang开发者要注意的陷阱、技巧和常见错误-高级
from : https://levy.at/blog/11 进阶篇关闭HTTP的响应 level: intermediate 当你使用标准http库发起请求时,你得到一个http的响应变量.如果你 ...
DICOM：DICOM Print 服务详细介绍
目录(?)[-] 背景 DICOM Print服务数据流 DICOM Print服务各部分关系 DICOM Print服务具体实现背景: 昨天专栏中发表了一篇关于DICOM Print的博文 ...
centos 升级内核失败回救
在升级 centos6.3上使用, yum -y update ... 灾难出现了!!! 解决方法: 1. 在机器启动的时候, 按F1, 会出现选择内核,选一个原来的. 2. vim /etc/gr ...
Web知识点收集
1.微信屏蔽浏览器,打开办法: 如果微信webapp屏蔽了浏览器打开,通常是通过判断代理类型来做到的. 解决办法:进入浏览器开发者模式,修改浏览器代理为: Mozilla/5.0 (iPhone; C ...
SpringMVC：JSON
@ResponseBody params="json":访问我这个方法的时候一定要有参数名为json 返回值Userjackson-all-1.9.0.jar @RequestMa ...
String,StringBuilder性能对照
import java.util.Date; import java.util.UUID; /** * 測试String,StringBuilder性能,推断什么时候改用String,什么时候该用S ...

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

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

随机推荐

热门专题