CSS3 Gradient 分为linear-gradient(线性渐变)和radial-gradient(径向渐变)，linear-gradient共有三个参数，第一个参数表示线性渐变的方向，可以使用角度或者关键字来设置。to left设置渐变从右到左，相当于270deg;to right 设置渐变从左到右，相当于90deg；to top设置渐变从下到上，相当于0deg；to buttom(默认值，等于留空)设置渐变从上到下，相当于180deg；第二个和第三个参数分别表示起点颜色和终点颜色。 CSS3 中利用transform来实现文字或图像的旋转、缩放、倾斜、移动。 transform:rotate()来实现旋转，只有一个参数：角度，单位deg，角度为正数时表示顺时针旋转，为负数时表示逆时针旋转。 transform:scale()来实现缩放，参数表示缩放的倍数，一个参数时表示水平和垂直同时缩放，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。 transform:skew()来实现倾斜,参数表示倾斜角度，单位deg，一个参数时表示水平方向的倾斜角度，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。 transform:translate()来实现移动，参数表示移动距离，单位px，一个参数时表示水平方向的移动距离，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。 transform-origin:5px 5px;设置基准点，默认的基点是其中心位置，共有两个参数，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离。其中除了指定为具体的像素值以外，第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态导航</title> <style type="text/css"> li{ list-style: none; width: 100px; margin:10px; padding: 10px; background: linear-gradient(to right,orange,red);/*线性渐变*/ border-radius: 10px; } a{ text-decoration: none; font-family: 楷书; font-size: 14px; color: #F2E0E0; } .ul1 li{ float: left; } li:hover{ background: linear-gradient(to left,orange,red); transform: rotate(15deg);/*顺时针旋转15度*/ transform-origin: left top;/*变形原点为左上角*/ } hr{ clear: both; border: 3px dotted orange; } </style> </head> <body> <ul class="ul1"> <li><a href="#">html5</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">jquery</a></li> </ul> <hr> <ul class="ul2"> <li><a href="#">html5</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">jquery</a></li> </ul> </body> </html>效果是这样子的：
