标签：style blog http color 使用 os
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>
标签：style blog http color 使用 os
原文地址：http://www.cnblogs.com/youtianxia/p/3837205.html
