以前实现动画背景是这样的。
原理：使用js控制div，从而实现动画渐变效果。（可以兼容旧IE）
<!doctype html> <html> <head> <title>js</title> <meta charset="utf-8"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function() { var orgColors = [{ r: 76, g: 76, b: 76 }, { r: 30, g: 87, b: 153 }, { r: 180, g: 227, b: 145 }, { r: 237, g: 144, b: 23 }] var colorGrandientSteps = 10; function getColor(color0, color1, curstep, defaultStep) { return { g: parseInt(color0.g + (color1.g - color0.g) / defaultStep * curstep, 10), r: parseInt(color0.r + (color1.r - color0.r) / defaultStep * curstep, 10), b: parseInt(color0.b + (color1.b - color0.b) / defaultStep * curstep, 10) } } var renderColor = (function(colors, defaultStep) { var curstep = 1; var color1 = colors[0], color2 = colors[1]; return function() { var newColor = getColor(color1, color2, curstep, defaultStep); var cssColor = 'rgb(' + newColor.r + ',' + newColor.g + ',' + newColor.b + ')'; $('div#fill').css({ "background-color": cssColor }); curstep++; if(curstep === defaultStep + 1) { curstep = 1; colors.push(color1); colors.shift(); color1 = colors[0]; color2 = colors[1]; } } })(orgColors, colorGrandientSteps); setInterval(function() { renderColor(); }, 50); }); </script> <style type="text/css"> * { margin: 0; padding: 0; } #fill { width: 100%; height: 100px; } </style> </head> <body> <div id="fill"></div> </body> </html>
现在可以这样实现动画背景。
原理：利用svg+css animation属性，从而实现动画渐变效果。（简单，无需js）
<!doctype html> <html> <head> <title>svg</title> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } @keyframes fill { 0% { fill: rgb(76, 76, 76); fill: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); fill: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); fill: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#fcfcfc', GradientType=0); } 25% { fill: rgb(30, 87, 153); fill: -moz-linear-gradient(top, rgb(30, 87, 153) 0%, rgb(32, 124, 202) 27%, rgb(32, 124, 202) 27%, rgb(125, 185, 232) 100%); fill: -webkit-linear-gradient(top, rgb(30, 87, 153) 0%, rgb(32, 124, 202) 27%, rgb(32, 124, 202) 27%, rgb(125, 185, 232) 100%); fill: linear-gradient(to bottom, rgb(30, 87, 153) 0%, rgb(32, 124, 202) 27%, rgb(32, 124, 202) 27%, rgb(125, 185, 232) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); } 50% { fill: rgb(180, 227, 145); fill: -moz-linear-gradient(top, rgb(180, 227, 145) 0%, rgb(97, 196, 25) 84%, rgb(180, 227, 145) 100%); fill: -webkit-linear-gradient(top, rgb(180, 227, 145) 0%, rgb(97, 196, 25) 84%, rgb(180, 227, 145) 100%); fill: linear-gradient(to bottom, rgb(180, 227, 145) 0%, rgb(97, 196, 25) 84%, rgb(180, 227, 145) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391', GradientType=0); } 75% { fill: rgb(237, 144, 23); fill: -moz-linear-gradient(top, rgb(237, 144, 23) 0%, rgb(237, 144, 23) 0%, rgb(251, 255, 188) 70%); fill: -webkit-linear-gradient(top, rgb(237, 144, 23) 0%, rgb(237, 144, 23) 0%, rgb(251, 255, 188) 70%); fill: linear-gradient(to bottom, rgb(237, 144, 23) 0%, rgb(237, 144, 23) 0%, rgb(251, 255, 188) 70%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#fbffbc', GradientType=0); } 100% { fill: rgb(76, 76, 76); fill: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); fill: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); fill: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(71, 71, 71, 1) 2%, rgba(252, 252, 252, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#fcfcfc', GradientType=0); } } #fill { animation-name: fill; animation-duration: 3s; animation-iteration-count: infinite; } </style> </head> <body> <svg width="100%" height="100%"> <rect id="fill" width="100%" height="100" /> </svg> </body> </html>