0

我在悬停事件上使用动画 CSS 渐变背景中的以下代码，这太棒了。但是，我希望渐变从左到右。

.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;
}

还是没有骰子。

4

1 回答 1

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;
}

演示

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

    background-size: 200% 100%;

好吧，y 维度无关紧要，但将其设置为 100% 会更清晰。和悬停到

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

更新了 2 种尺寸的演示

于 2013-05-31T20:20:50.997 回答