html字体飞入效果并定住,实现css文字飞入效果示例代码

这篇文章实现css文字飞入效果示例代码

一、页面的主体布局

左右淡入的企业介绍

上海世茂集团企业招聘

世茂集团，是以房地产开发为主的国际化企业集群，房地产界领袖企业之一。

上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了，一个多余的美观性布局我都不愿意写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-keyfra