Question

我正在玩CSS3 Gradient并尝试在鼠标悬停时移动它。从这个jsFiddle可以看出，CSS渐变出现在:hover上;然而，它似乎闪烁了几次。

仅供参考，到目前为止，已在Chrome v30 / Firefox v24 / Safari v5.1上对此进行了测试。

另外，两者都已成为工作解决方案，但结合起来，我得到了闪烁效果。

nav li {
    width: 90px;
    padding-right: 15px;
    padding-left: 15px;
    height: 30px;
    border: 1px solid #000;
    float: left;
    list-style-type: none;

    background-position: -200px -200px;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

nav li:hover {
    background-position: 200px 0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}

我尝试使用animation-iteration-count限制动画，但正如我所知，这似乎只适用于动画和@keyframes。我也读过几个不同的网站 @keyframes尚不支持CSS Gradient动画。

Answer 1

问题是背景重复。您必须将其设置为不重复，以便在悬停之前看不到背景

background-repeat: no-repeat;

JSFiddle

Answer 2

闪烁效果是由于元素高度（30px）与您为背景提供的偏移（-200px - ＆gt; 0px）之间的差异造成的。

基本上，它在一秒过渡中滚动浏览视图六次（因为30次变为200次六次），这就是给你闪烁效果的原因。如果你稍微增加过渡时间，比如5秒，你可以更容易地看到效果;这将使它更明显地发生了什么。（显然你可以在完成测试时将其设置回来）

如果您将初始background-position更改为-30px而不是-200px，则只会将其滚动到视图中一次，因此不会闪烁。

希望有所帮助。

Answer 3

正如其他答案所述，问题是background-repeat和你非常大的背景位置。

Here是一个更新的小提琴，我相信你想要实现的目标。

请注意，我已删除了所有冗余的CSS规则 - 所有主流浏览器现在都支持gradients和transitons，不带前缀，这使得所有这些前缀都无用（还应注意{{1}和-ms-transition从来没有存在过，因为IE没有跳过枪...你知道至少有三种不同的方法可以在Chrome中定义渐变吗？）

除了清理之外，我还将背景定义移动到元素的样式（而不是其悬停样式）以确保可以“过渡”，否则它只会捕捉到空白。我已经应用-ms-linear-gradient仅允许水平重复，并调整background-repeat:repeat-x以便在初始状态下渐变几乎完全不在底部，并且悬停状态使得它在右边地点。这会产生平滑而精确的过渡。

希望这有帮助！

CSS3 Gradient在悬停时闪烁

3 个答案: