前几天看到一个企业招聘的动画觉得很炫，里面有个企业介绍的文字是用飞入的效果做出来的，今天尝试了写了一下，感觉还不错~\(≧▽≦)/~啦啦啦

下面来看我做的动态效果：

其实上面的效果很简单的，我的截图软件有问题，所以不是很清晰，但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上关闭截图，不要被这个干扰~~~~

一、页面的主体布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>左右淡入的企业介绍</title>

        <link type="text/css" rel="stylesheet" href="css/animate.css" />

    </head>

    <body>

        <div class="company">

            <h2 class="company_name">上海世茂集团企业招聘</h2>

            <h5 class="company_introduce">世茂集团，是以房地产开发为主的国际化企业集群，房地产界领袖企业之一。</h5>

        </div>

    </body>

</html>

上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了，一个多余的美观性布局我都不愿意写QAQ，最直接的代码是为了方便我以后复制。

二、CSS样式（主要是CSS3）

body{

    overflow: hidden;  /*此处需要设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/

}

.company{

    width: 400px;

    margin: 0 auto;

    border: 1px #999999 solid;

}

/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/

@keyframes lefteaseinAnimate{

    0%{ transform: translateX(-2000px); opacity: 0;}   /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/

    100%{ transform: translateX(0px); opacity: 1;}         /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/

}

@-webkit-keyframes lefteaseinAnimate{

    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-o-keyframes lefteaseinAnimate{

    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-ms-keyframes lefteaseinAnimate{

    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-moz-keyframes lefteaseinAnimate{

    0%{ -webkit-transform: translateX(-2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

.company_name{

    animation: lefteaseinAnimate 1s ease 1;    /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/

    -webkit-animation: lefteaseinAnimate 1s ease 1;

    -ms-animation: lefteaseinAnimate 1s ease 1;

    -o-animation: lefteaseinAnimate 1s ease 1;

    -moz-animation: lefteaseinAnimate 1s ease 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;

}

/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/

@keyframes righteaseinAnimate{

    0%{ transform: translateX(2000px); opacity: 0;}   /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/

    100%{ transform: translateX(0px); opacity: 1;}      /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/

}

@-webkit-keyframes righteaseinAnimate{

    0%{ -webkit-transform: translateX(2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-o-keyframes righteaseinAnimate{

    0%{ -webkit-transform: translateX(2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-ms-keyframes righteaseinAnimate{

    0%{ -webkit-transform: translateX(2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@-moz-keyframes righteaseinAnimate{

    0%{ -webkit-transform: translateX(2000px); opacity: 0;}

    100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

.company_introduce{

    animation: righteaseinAnimate 1s ease 1;    /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/

    -webkit-animation: righteaseinAnimate 1s ease 1;

    -moz-animation: righteaseinAnimate 1s ease 1;

    -ms-animation: righteaseinAnimate 1s ease 1;

    -o-animation: righteaseinAnimate 1s ease 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;

}

额，我觉得上面的很小儿科，注释我也写的很清楚，需要注意的是刚开始就要给body添加一个overflow: hidden; 设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条，这个也是我最后才发现的小问题，一句话就解决了~~~~~

CSS3学习笔记（3）—左右飞入的文字的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

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

    今天有空把前几天学的东西发一下,都是一些简单的东西,但是千里之行始于足下,我虽然走的慢,但是未停下前进的脚步, 下来看下我做的“淡入的文字”最终动态效果: 上面这个动画效果制作的过程是: (1)先自定 ...

  4. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  9. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. ASP.NET Core 中间件基本用法

    ASP.NET Core 中间件 ASP.NET Core的处理流程是一个管道,而中间件是装配到管道中的用于处理请求和响应的组件.中间件按照装配的先后顺序执行,并决定是否进入下一个组件.中间件管道的处 ...

  2. 一次完整的http请求过程以及网络I/O模型select、epoll

    a.一次完整的http请求过程 1.域名解析,得到域名对应的IP; 2.三次握手,客户端与服务器通过socket建立TCP/IP连接; 3.浏览器向服务器发送http请求,如:GET/index.ht ...

  3. Atcoder Grand Contest 024

    A 略 B 略 C 略 D(构造分形) 题意: 给出一个由n个点的组成的树,你可以加一些点形成一个更大的树.对于新树中的两个点i和j,如果以i为根的树与以j为根的树是同构的那么i和j颜色可以相同.问最 ...

  4. Flink起步安装和使用

    下载安装 下载地址 下载对应操作系统和版本的flink  # 首先确认下Java环境 $ java -version  java version "1.8.0_111" Java( ...

  5. Cookie安全与CSRF和XSS攻击知识点收集

    个人简单理解: 1.XSS最简单的理解就是可以在表单提交的内容上嵌入JS执行代码,然后页面渲染的时候没有过滤时会自动执行这个脚本. 2.CSRF可以理解为当你登录了京东,浏览器上保存了你登录的Cook ...

  6. ubuntu安装 uwsgi

    http://www.jianshu.com/p/e6ff4a28ab5a/ sudo apt-get install python-dev #不安装这个,下面的安装可能会失败 sudo pip in ...

  7. Flex4_Tree组件1(添加、删除、展开、关闭、右键菜单)

    1.屏蔽系统菜单:工程目录“html-template”文件夹-->“index.template.html”文件中,在var params = {};语句下添加新语句:        para ...

  8. C# trim split dataGrid

    C#中Trim().TrimStart().TrimEnd()的用法:     这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一 ...

  9. MyEclipse的html/JSP编辑器添加代码自动提示

    http://lusterfly.iteye.com/blog/1872627 在myeclipse 9以前的版本中,我们如果要为html编辑器添加自动的代码提示可以这样操作: windows--&g ...

  10. 随便写一点最近开发遇到的问题和解决方法 大部分关于laravel和php

    laravel里要想对对象进行自己设计的排序(usort()), 得用匿名方法,  原声php就不用 php里面可以随便写html代码,  比如可以把html直接后缀名改成.php, 然后在任何地方& ...