HTML5藍色海洋

2024-09-05 12:17:18

字體：大中小

來源：轉載

供稿：網友

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   class="iwvjtn8m0"   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菜單按鈕風格

下一篇：CSS3日出特效-HTML5日月星辰變換