程序喵
偶然的今天看到一个国外网站 http://www.alohaeditor.org/，发现首页背景自动渐变，感觉很有意思，查看源码发现如此简单，具体的代码就不多讲了，哪怕新手也是一看就能看会的，具体示例代码如下
示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
}
body {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
line-height: 150%;
transition: background-color 15s;
background: #54c8eb;
}
.content {
width: 40%;
margin: 5% 30% 0 30%;
text-shadow: 1px 1px 10px rgba(0,0,0,0.8);
}
@media (max-width: 768px) {
.content {
width: 80%;
margin: 5% 10% 0 10%;
}
}
a {
color: white;
text-decoration: none;
border-bottom: 2px solid rgba(255,255,255,0.6);
}
a.btn {
background: rgba(0,0,0,0.1);
padding: 1.6% 2%;
margin: 2% 1% 1% 0;
color: white;
font-size: 18px;
text-shadow: none;
text-decoration: none;
border-radius: 5px;
display: inline-block;
border: 1px solid white;
}
</style>
<script>
(function () {
function colorcycle() {
var colors = [
'#54c8eb', // light blue
'#4ea9de', // med blue
'#4b97d2', // dark blue
'#92cc8f', // light green
'#41bb98', // mint green
'#c9de83', // yellowish green
'#dee569', // yellowisher green
'#c891c0', // light purple
'#9464a8', // med purple
'#7755a1', // dark purple
'#f069a1', // light pink
'#f05884', // med pink
'#e7457b', // dark pink
'#ffd47e', // peach
'#f69078' // salmon
];
var color = colors[parseInt(Math.random() * (colors.length - 1), 10)];
document.getElementsByTagName('body')[0].style.backgroundColor = color;
}
setTimeout(function () {
colorcycle();
setInterval(colorcycle, 15000);
}, 1000);
}());
</script>
</head>
<body>
<div class="content">
Hello X-rapido！欢迎您访问X-rapido的博客！ 返回<a href="ibloger.net">首页</a>
</div>
</body>
</html>未经允许请勿转载：程序喵 » 【特效】JavaScript网页自动渐变色