你好，方式有很多哦，随便列举3种方式：
使用本身就是动态变化的（gif）作背景。但是gif图不仅要求图片长宽大，而且清晰度也要高。
使用几张图片，用javascript每隔一段时间刷新背景图片的url地址为每一张图片。
使用HTML5 动画技术。
html5 canvas首屏自适应背景动画循环效果的插入方法：1、demo.html代码如下：
<html lang="en" class="no-js"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5 canvas首屏自适应背景动画循环效果代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css">
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header" style="height: 185px">
<canvas id="demo-canvas" width="1304" height="185"></canvas>
<h1 class="main-title">Connect <span class="thin">Three</span></h1>
</div>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
<div class="sogoutip" style="z-index: 2147483645visibility: hiddendisplay: none"></div><div class="sogoubottom" id="sougou_bottom" style="display: none"></div><div id="ext_stophi" style="z-index: 2147483647"><div class="extnoticebg"></div><div class="extnotice"><h2>关闭提示 <a href="#" title="关闭提示" id="closenotice" class="closenotice">关闭</a></h2><p id="sogouconfirmtxt"></p> <a id="sogouconfirm" href="#" class="extconfirm">确 认</a><a id="sogoucancel" href="#" class="extconfirm">取 消</a></div></div><div id="ext_overlay" class="ext_overlayBG" style="display: nonez-index: 2147483646"></div><iframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src="http://ht.www.sogou.com/websearch/features/yun6.jsp?pid=sogou-brse-d2a452edff079ca6&w=1366&v=7400&st=1465483516429&od=6612&ls=1465482970132&lc=&lk=1463925952631&sd=72&cd=0&kd=0&u=1450532590172818&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html&r=http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex2.html" style="border: nonedisplay: nonez-index: 2147483645background: transparent"></iframe><script src="http://pb.sogou.com/pv.gif?hintbl=-1&uigs_productid=webext&type=ext_sugg&uigs_t=1465483517392<=212&ie=0&v=7400&y=EC8B5B0919EDD514D2F1263AA4A58EF6&query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2Fwww.777moban.com%2FPreview%2F35_196%2Findex.html"></script>
</body>
</html>
2、css样式如下：
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:noneheight:0}[hidden]{display:none}html{font-family:sans-serif-ms-text-size-adjust:100%-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2emmargin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-boxbox-sizing:content-boxheight:0}mark{background:#ff0color:#000}code,kbd,pre,samp{font-family:monospace,seriffont-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%line-height:0position:relativevertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0margin:0 2pxpadding:0.35em 0.625em 0.75em}legend{border:0padding:0}button,input,select,textarea{font-family:inheritfont-size:100%margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:buttoncursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-boxpadding:0}input[type="search"]{-webkit-appearance:textfield-moz-box-sizing:content-box-webkit-box-sizing:content-boxbox-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0padding:0}textarea{overflow:autovertical-align:top}table{border-collapse:collapseborder-spacing:0}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）