首页 > 代码库 > HTML5蓝色海洋
HTML5蓝色海洋
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。