一、页面的主体布局

<!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. Java并发编程实践读书笔记（3）任务执行

    类似于Web服务器这种多任务情况时,不可能只用一个线程来对外提供服务.这样效率和吞吐量都太低. 但是也不能来一个请求就创建一个线程,因为创建线程的成本很高,系统能创建的线程数量是有限的. 于是Exec ...

  2. POJ 1287

    #include<iostream> #include<stdio.h> #define MAXN 100 #define inf 1000000000 using names ...

  3. POJ 1118

    #include<iostream> #include<set> #include<stdio.h> #include<math.h> #include ...

  4. linux下mysql主从复制搭建

    目标:搭建两台MySQL服务器,一台作为主服务器,一台作为从服务器,实现主从复制 环境: 主数据库: 192.168.1.1 从数据库: 192.168.1.2 mysql安装可参考:https:// ...

  5. TapTap推广统计逻辑

    当我们在Taptap上访问某款游戏时,比如https://www.taptap.com/app/34762,taptap会记录下这次访问,它是怎么做的呢. 首先,用记事本打开这个网址,在head部分看 ...

  6. python-在定义函数时，不定长参数中，默认值参数不能放在必选参数前面

    如果一个函数的参数中含有默认参数,则这个默认参数后的所有参数都必须是默认参数,否则会报错:SyntaxError: non-default argument follows default argum ...

  7. Centos 6.5下的OPENJDK卸载和SUN的JDK安装、环境变量配置

    不多说,直接上干货! 说明 图形界面安装,会自带有Centos6.5自带的OPRNJDK!!! *********************************自带的OPENJDK的卸载****** ...

  8. 前端通信：ajax设计方案（三）--- 集成ajax上传技术

    在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...

  9. unity 图片变纯色填充

    unity自带shader 即可

  10. Java虚拟机（二）：JVM内存模型

    所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemoryError的异常到底涉及到运行时数据的哪块区域?该怎么解决呢?其实如果你经常解决服务器性能问题,那么这些问 ...