html:
<!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' /><title>移动端</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body> <div class="img"> <img src="images/img-1.jpg" /></div> <script type="text/javascript"> function imganimation(){ var imgobj = document.getelementsbytagname("div")[0]; imgobj.onclick =function(){ if(imgobj){ imgobj.classname = "img imganimation"; } } } imganimation(); </script></body></html>
css:
@charset "utf-8";/* css document */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 infinite; -webkit-animation: imganimation 2s alternate infinite; -moz-animation: imganimation 2s alternate infinite; } /* @-webkit-keyframes imganimation{ 0%{ left: -198px} 100%{ left: 50%;} } @-moz-keyframes imganimation{ 0%{ left: -198px} 100%{ left: 50%;} } */ @-webkit-keyframes imganimation{ 0%{ opacity: 0} 50%{ opacity: 0.5} 100%{ opacity: 1} } @-moz-keyframes imganimation{ 0%{ opacity: 0} 50%{ opacity: 0.5} 100%{ opacity: 1} }
css中屏蔽的那部分代码就是图片飞入的css，简单实用，比当年手写js要方便的多。
【相关推荐】
1. css3免费视频教程
2. 教你使用css3制作8种loading动画
3. 教你用css绘制标准的圆形图案
4. css3完成一个方框圆角效果的代码教程
5. 教你怎么去规范的书写css样式
以上就是h5+css3实现图片飞入和淡入淡出效果的代码实例的详细内容。