文字飞入

最新推荐文章于 2021-06-26 02:11:17 发布

转载最新推荐文章于 2021-06-26 02:11:17 发布 · 316 阅读

文章标签：

文字飞入（刚进入页面时）

<!doctype html>  
<html lang="en">  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
<meta name='apple-mobile-web-app-capable' content='yes' />  
<meta name="format-detection" content="telephone=no" />  
<meta http-equiv='Content-Type' content='textml;charset=UTF-8' />  
  <style>  
/* Demo Styles */  
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 1em; font-family:"Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica ,STHeiti; color: #4c4948; }  
html,body{ min-height:100%; }  
img,input,button,a,select,textarea{ margin: 0; padding: 0; resize:none; border:none; outline:none; }   
ol,ul { list-style:none; }   
h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }  
a:active, a:focus{ outline:none; }  
button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }  
table{ border-collapse:collapse; border-spacing:0; }  
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }  
.clearfix{ zoom:1; }  
a{ color: #4c4948; text-decoration: none; }  
   
   
.img{ width: 190px; height: 120px; padding: 3px; border: 1px solid #ccc; position: absolute;z-index: 12; top: 50px; left: 50%;  
 margin-left: -95px; }  
 /*动画名字， 动画运行的时间，alternate平滑过渡， infinite是反复执行*/  
 .imgAnimation{  
      animation-name: imgAnimation;  
      animation: imgAnimation 2s alternate;  
      -webkit-animation: imgAnimation 2s alternate ;  
      -moz-animation: imgAnimation 2s alternate infinite;  
 }

@keyframes theanimationTiyan{
  0% {right:-200px;}
  100% {right:0px;}
}
@-webkit-keyframes theanimationTiyan{
  0% {right:-200px;}
  100% {right:0px;}
}
@-moz-keyframes theanimationTiyan{
  0% {right:-200px;}
  100% {right:0px;}
}
@-o-keyframes theanimationTiyan{
  0% {right:-200px;}
  100% {right:0px;}
}
@-ms-keyframes theanimationTiyan{
  0% {right:-200px;}
  100% {right:0px;}
}       /* 兼容 */

@-webkit-keyframes imgAnimation{  
    0%{ left: -198px;top:500px;}  
    100%{ top: 50px; left: 50%;  
 margin-left: -95px;}  
 }  
 </style>  
</head>  
<body>  
     
     <div class="img imgAnimation"> 文字飞入 </div>  
       
</body>  
</html>