HTML5蓝色海洋

2020-01-27 14:17:19

字体：大中小

来源：转载

供稿：网友

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>

上一篇：CSS3日出特效-HTML5日月星辰变换

下一篇：超漂亮的CSS3菜单按钮风格