div固定大小
js，jquery只用setTimeout、setInterval函数进行图片由小变大，宽度到底指定宽度后停止放大
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8" />
<title>简单透明度渐变</title>
</head>
<style type="text/css">
*{margin:0padding:0}
#oDiv{width:200pxheight:200pxmargin:0 autobackground:#000}
</style>
<body>
<div id="oDiv" style="opacity:1">Lee</div>
</body>
<script type="text/javascript">
window.onload = function(){
var timer = setInterval(colorLiner,20)
var val = 100
function colorLiner(){
if(val >= 0){
var oDiv = document.getElementById('oDiv')
oDiv.style.opacity = val/100
val--
}
}
}
</script>
</html>
动态渐变
<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的其它*/
