一、页面的主体布局

<!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. css之IE hack 方法[ IE6 - IE9]

    ps: 由于近来需要研究IE下兼容问题,今天又再次翻起起这些针对IE的hack,于是决定写下这篇笔记,记录下这些本该献祭级浏览器下的处理方法,用于备忘 一.IE10以及以下版本均会生效(ie edge ...

  2. C#：注册机的实现

    先看界面 软件的实现: SoftReg类: using System; using System.Collections.Generic; using System.Linq; using Syste ...

  3. Java学习之路(八)：Set

    Set集合概述以及特点: set 是一个不包含重复元素的collection set只是一个接口,一般使用它的子类HashSet,LinkedHashSet,TreeSet HashSet 此类是Se ...

  4. Python -- 网络编程 -- 抓取网页图片 -- 图虫网

    字符串(str)编码成字节码(bytes),字节码解码为字符串 获取当前环境编码:sys.stdin.encoding url编码urllib.parse.quote() url解码urllib.pa ...

  5. Python -- Gui编程 -- Win32API的使用

    消息框 messageBox.py import win32api, win32con win32api.MessageBox(0, 'Hello World!', 'Come Here', win3 ...

  6. Kafka消息重新发送

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

  7. jquery.dataTables动态列--转

    转自 https://www.cnblogs.com/lyeo/p/4765514.html jquery.dataTables  版本1.10.7 直接上代码: 0.table <table ...

  8. python性能对比

    python性能对比之items #1 #-*- coding:utf8-*- import datetime road_nodes = {} for i in range(5000000): roa ...

  9. vue2.x中请求之前数据显示以及vuex缓存的问题

    在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户 ...

  10. js 3行代码，最简易实现div效果悬浮

    简易实现浮动效果的首要因素是:获取滚动条距离浏览器顶部的距离,下面直接贴代码: <!DOCTYPE html> <html> <head> <meta cha ...