第一种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>animated-bg</title>
    <link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
    <style type="text/css">
    .animate-bg {
        color: #f35626;
        background-image: -webkit-linear-gradient(90deg, #f35626, #feab3a);
        -webkit-background-clip:content-box;
        -webkit-text-fill-color: transparent;
        -webkit-animation: hue 60s infinite linear;
    } 
    /* animations */   
    @-webkit-keyframes hue {
        from {
            -webkit-filter: hue-rotate(0deg);
        }
        to {
            -webkit-filter: hue-rotate(-360deg);
        }
    }
    html,body{
    	background-color: #fff;
    	height:100%;
    	width:100%;
    }
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body class="animate-bg">
    
</body>

</html>

第二种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>animated-bg</title>
    <link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!--默认的animate函数不支持color类型的渐变，在网上找的一个jQuery插件-->
    <script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
    <style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        background: #654e9c;
    }
    </style>
</head>

<body>
    <script>
    $(document).ready(function() {
        $('body').each(function() {
            var $this = $(this),
                colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
            setInterval(function() {
                var color = colors.shift();
                colors.push(color);
                $this.animate({
                    backgroundColor: color
                }, 2000);
            }, 4000);
        });
    })
    </script>
</body>

</html>