HTML5蓝色海洋
HTML5藍(lán)色海洋效果，無圖片實(shí)現(xiàn)不規(guī)則的漸變效果，html5確實(shí)不錯(cuò)，不過現(xiàn)在主流的IE8不支持HTML5，所以大家測(cè)試的時(shí)候請(qǐng)使用火狐或Safari或Chrome、Opera等瀏覽器。
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5藍(lán)色海洋</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>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/youtianxia/p/3837205.html
總結(jié)
- 上一篇： iOS ARC环境下dealloc的使用
- 下一篇： 一款基于jquery带百分比的响应式进度