css3可以实现的：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>gradient-transform</title>
<style>
body{margin: 0}
#demo{
width: 500px
height: 200px
/*渐变*/
background: linear-gradient(left,blue,#fff)
background: -ms-linear-gradient(left,blue,#fff)
background: -webkit-linear-gradient(left,blue,#fff)
background: -o-linear-gradient(left,blue,#fff)
background: -moz-linear-gradient(left,blue,#fff)
/*圆角*/
/* border-top-left-radius: 20px
border-bottom-right-radius: 20px*/
}
.2demo2{
-moz-transform:scaleY(-1)
-webkit-transform:scaleY(-1)
-o-transform:scaleY(-1)
transform:scaleY(-1)
/*IE*/
filter:FlipV
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
你看下背景从蓝色变成白色。。
如果你要不斜的渐变估计实现起来比较难。
有用就采纳把~~~
background-attachment: fixedbackground-size: cover
实现背景图平铺展开，各自显示各自区域的背景图
上面transition: all 0.4s ease-in-out
下面opacity: 0.7transform: scale(0.99)
实现动画效果过度，缩放
有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等
transition-duration:time[,time]*：指定对象过渡的持续时间
transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。
五种预留特效：
linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)
transition-timing-function是transition属性里最为复杂的一个，针对的是过度效果的特效。
也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内。（贝塞尔曲线，有人也翻译为贝兹曲线）
