动态渐变
<span style="font-size:12px"><html>
...
<body>
<center>
<div id="fade" style="width:600pxheight:200px"></div>
</center>
</body>
</html></span>
为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
<span style="font-size:12px"><script type="text/javascript">
var node=document.getElementById("fade")
var color="#0000"
var level=1
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString()
level++
if(level>16){
clearTimeOut(fading)
}else{
setTimeOut(fading,300)
}
}
<script></span>
静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff))
简单解释下：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；
附送下简单的其他的基本代码
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8)/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000)/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff))/*非IE6的其它*/
这是我以前收藏的代码，利用CSS+JS实现渐变，代码如下：<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html charset=gbk">
<title>渐变背景</title>
<script>
var setGradient = (function(){
//private variables
var p_dCanvas = document.createElement('canvas')
var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function')
var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null
var p_isIE = /*@cc_on!@*/false
//test if toDataURL() is supported by Canvas since Safari may not support it
try{ p_dCtx.canvas.toDataURL() }catch(err){
p_useCanvas = false
}
if(p_useCanvas){
return function (dEl , sColor1 , sColor2 , bRepeatY ){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)
if(!dEl) return false
var nW = dEl.offsetWidth
var nH = dEl.offsetHeight
p_dCanvas.width = nW
p_dCanvas.height = nH
var dGradient
var sRepeat
// Create gradients
if(bRepeatY){
dGradient = p_dCtx.createLinearGradient(0,0,nW,0)
sRepeat = 'repeat-y'
}else{
dGradient = p_dCtx.createLinearGradient(0,0,0,nH)
sRepeat = 'repeat-x'
}
dGradient.addColorStop(0,sColor1)
dGradient.addColorStop(1,sColor2)
p_dCtx.fillStyle = dGradient
p_dCtx.fillRect(0,0,nW,nH)
var sDataUrl = p_dCtx.canvas.toDataURL('image/png')
with(dEl.style){
backgroundRepeat = sRepeat
backgroundImage = 'url(' + sDataUrl + ')'
backgroundColor = sColor2
}
}
}else if(p_isIE){
p_dCanvas = p_useCanvas = p_dCtx = null
return function (dEl , sColor1 , sColor2 , bRepeatY){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)
if(!dEl) return false
dEl.style.zoom = 1
var sF = dEl.currentStyle.filter
dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('')
}
}else{
p_dCanvas = p_useCanvas = p_dCtx = null
return function(dEl , sColor1 , sColor2 ){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)
if(!dEl) return false
with(dEl.style){
backgroundColor = sColor2
}
//alert('your browser does not support gradient effet')
}
}
})()
</script>
<style>
body{font:0.75em/1.4 Arialtext-align:leftmargin:20px}
hr{clear:bothvisibility:hidden}
xmp{font:12px/12px "Courier New"background:#fffcolor:#666 border:solid 1px #ccc}
div.example{ border:solid 1px #555margin:0 20px 20px 0float:left display:inlinemargin:1embackground:#fffwidth:300pxpadding:40pxcolor:#222font:xx-small/1.2 "Tahoma"text-align:justify}
</style>
<body>
<h1>渐变背景-beta1</h1>
<div id="example1" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>
<div id="example2" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretiu </div>
<div id="example3" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna </div>
<div id="example4" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interdum sit amet, </div>
<div id="example5" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>
<div id="example6" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>
<script>
setGradient('example1','#4ddbbe','#d449cc',1)
setGradient('example2','#46ddbd','#d8b617',0)
setGradient('example3','#c81fc1','#bf445f',1)
setGradient('example4','#2285e5','#d769eb',0)
setGradient('example5','#8b4286','#eac87d',1)
setGradient('example6','black','white',0)
</script>
</body>
</html>
把颜色值转换成rgb方式，设定多少秒改变完成，每次改变多少值，计算需要多少次，比如rba(x,y,z)到rgb(a,b,c)，假设需要100次，那么每次设定rgb((a-x)/100+x,(b-y)/100+y,(c-z)/100+z)
