一、页面的主体布局

<!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; 设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条

css文字飞入效果的更多相关文章

  1. 奇思妙想 CSS 文字动画

    之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...

  2. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  3. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  4. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  5. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  6. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. ECSHOP添加购物车加图片飞入效果

    为ECSHOP的添加购物车,加入图片飞入效果. 首先: 在goods.dwt中查找添加购物车按钮: 为添加购物车按钮加上id: 例如: <a id="iproduct_{$goods. ...

  8. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  9. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

随机推荐

  1. 快捷键&小技巧

    shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...

  2. 设置pip源头地址

    更新pip源 1 . 可以直接在pip时加入参数 比如: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple mysqldb 2 . 修改默 ...

  3. Linux 搭建Hadoop集群错误锦集

    一.Hadoop集群配置好后,执行start-dfs.sh后报错,一堆permission denied zf sbin $ ./start-dfs.sh Starting namenodes on ...

  4. C语言中的条件编译

    通常情况,我们想让程序选择性地执行,多会使用分支语句,比如if-else 或者switch-case 等.但有些时候,可能在程序的运行过程中,某个分支根本不会执行. 比如我们要写一个跨平台项目,要求项 ...

  5. printf()函数中\t，水平制表符，空格的个数

    在控制台输出数据的时候,也就是用printf()的时候,我们经常用\t来控制对齐,以使输出的结果更加整齐美观. 然而有时候我们发现及时使用了\t 也会出现数据对不齐的情况,这就跟\t究竟对应几个空格有 ...

  6. 笔记五：python字符串

    一:学习内容 字符串类型 字符串类型判断 字符串类型互转 字符串小练习 二:字符串类型 1. basestring 在python中和字符串相关的数据类型为:str和unicode,他们都是bases ...

  7. Kafka消息重新发送

    Kafka消息重新发送   1.  使用kafka消息队列做消息的发布.订阅,如果consumer端消费出问题,导致数据并没有消费,此时不需要担心,数据并不会立刻丢失,kafka会把数据在服务器的磁盘 ...

  8. Web 后端--PHP 与数据库的交互

    网页要处理数据,数据置于数据库之中.今天看了书,不能让知识遗忘,遂及时记下. 用 PHP  操作 MySQL ,实现数据的交换,还要多练练.... PS: 以下 mysql 字段与mysqli 字段皆 ...

  9. visual studio 不能进入调试状态

    解决Windows操作系统在处理回环地址 1. 第一种解决方案是禁用环回检查. 步骤如下 a) 依次单击“开始”和“运行”,键入 regedit,然后单击“确定” b) 在注册表编辑器中,找到并单击下 ...

  10. .net core 2.2 部署CentOS7（2）给虚拟机安装CentOS7

    目录: .net core 2.2 部署CentOS7(1)安装虚拟机 .net core 2.2 部署CentOS7(2)给虚拟机安装CentOS7 .net core 2.2 部署CentOS7( ...