2023年6月20日发(作者：)

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-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; 设置溢出隐藏，否则⽂字起始位移超过页⾯⼤⼩就会在页⾯下⽅出现横的滚动条

2023年6月20日发(作者：)

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-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; 设置溢出隐藏，否则⽂字起始位移超过页⾯⼤⼩就会在页⾯下⽅出现横的滚动条