旋转渐变

Question

我正在使用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;
}

我尝试添加左侧并用背景图片替换背景，如下所述：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;
}

仍然没有骰子。

Answer 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