【问题标题】：Rotate gradient旋转渐变
【发布时间】：2013-05-31 19:38:01
【问题描述】：

我正在使用来自Animating a CSS gradient background on the hover event 的以下代码，这太棒了。但是，我希望渐变从左到右。

.gradient {
    background: -webkit-linear-gradient(lightgray,white);
    background: -moz-linear-gradient(lightgray,white);
    background: -o-linear-gradient(lightgray,white);
    background: linear-gradient(lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 1px 200px;
    -o-background-size: 1px 200px;
    -webkit-background-size: 1px 200px;
    background-size: 1px 200px;
    cursor: pointer;
}

.gradient:Hover {
    background-position: 100px;
}

我尝试添加 left 并用 background-image 替换背景，如下所述：http://www.webdirections.org/blog/css3-linear-gradients/

.gradient {
    background: -webkit-linear-gradient(left, lightgray,white);
    background: -moz-linear-gradient(left, lightgray,white);
    background: -o-linear-gradient(left, lightgray,white);
    background: linear-gradient(left, lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 1px 200px;
    -o-background-size: 1px 200px;
    -webkit-background-size: 1px 200px;
    background-size: 1px 200px;
    cursor: pointer;
}

.gradient:Hover {
    background-position: 100px;
}

还是没有骰子。

【问题讨论】：

标签： css gradient

【解决方案1】：

你的问题是背景大小，如果我明白你正在尝试的尺寸有误

.gradient {
    background: -webkit-linear-gradient(left, lightgray,white);
    background: -moz-linear-gradient(left, lightgray,white);
    background: -o-linear-gradient(left, lightgray,white);
    background: linear-gradient(left, lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 200px 1px;
    -o-background-size: 200px 1px;
    -webkit-background-size: 200px 1px;
    background-size: 200px 1px;
    cursor: pointer;
}

demo

想想看，尺寸是预定义的，所以你的类是不可重用的。您可以使其分辨率独立，并且它的工作方式更容易理解。只需将背景更改为

    background-size: 200% 100%;

好吧，y 维度不相关，但将其设置为 100% 会更清晰。并将鼠标悬停在

.gradient:hover {
    background-position: 100%;
}

updated demo with 2 sizes

【讨论】：

很高兴它对您有所帮助。我添加了一个更好的解决方案。