HTML5蓝色海洋
HTML5蓝色海洋效果,无图片实现不规则的渐变效果,html5确实不错,不过现在主流的IE8不支持HTML5,所以大家测试的时候请使用火狐或Safari或Chrome、Opera等浏览器。
HTML5蓝色海洋效果,无图片实现不规则的渐变效果,html5确实不错,不过现在主流的IE8不支持HTML5,所以大家测试的时候请使用火狐或Safari或Chrome、Opera等浏览器。
答案:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5蓝色海洋</title>
</head>
<style>
body{
height:auto;
margin:0;
}
#ocean{
position:absolute;
width:100%;
min-height:100%;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,50,150)),
color-stop(0.50, rgb(0,150,255))
);
}
.wave{
background:#a8e3ff;
display:inline-block;
height:60%;
width:10px;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}
@-webkit-keyframes dostuff{
0%{
height:60%;
}
50%{
height:40%;
}
100%{
height:60%;
}
}
</style>
<body>
<div id="ocean">
</div>
<script>
var ocean = document.getElementById("ocean"),
waveWidth = 10,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";
}
ocean.appendChild(docFrag);
</script>
</body>
</html>
上一个:调整滑块改变网页背景颜色的JS代码
下一个:CSS3边框阴影,折角效果演示