0

也许我应该将其记录为 chrome 的错误，但我想我会在这里查看是否有解决该问题的方法。

我有一个使用 CSS3 在父 div 背景上带有动画的简单选择列表。当我打开下拉列表并将鼠标移到不同的选项上时，蓝条（悬停）会随着我的鼠标移动而跳来跳去，尤其是在列表中的最后一项上。

HTML：

<div id="backgroundContainer">
<select >
<option value="">-- Select a Test Case --</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
<option value="4">Test4</option>
<option value="5">Test5</option>
<option value="6">Test6</option>
<option value="7">Test7</option>
<option value="8">Test8</option>
</select>
</div>

CSS：

#backgroundContainer {
background-repeat: no-repeat;
background-color: #CCC;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png");
color: #fff;
height:500px;
width:100%;
-webkit-animation: moveUpDown 240s infinite linear;
}
@keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}
@-webkit-keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}

我在这里创建了一个 jsFiddle：http: //jsfiddle.net/ZfQU5/，它使用了上面的代码。

请看看我是否做错了什么或者是否有任何解决方法。当然，我可以只删除背景动画，但仍然奇怪的是它无论如何都会跳来跳去。

谢谢，

4

4 回答 4

1

麦克风，

是的，整个页面都在 Chrome 上跳转，在 Chrome 开发中也是如此，而不仅仅是下拉菜单。这不是错误，您的标记是错误的。它不会在 IE 中跳转，因为 IE 还不了解关键帧或 -webkit-keyframes。这就是跳跃的来源。您将菜单嵌套在标签，所以菜单选择了跳转。我已经在 Chrome 上测试了它，无论是否打开开发，IE9，FF，稍后我将运行 IE10 和 Opera，只是为了看看它们对这种编码的反应，但我相信它会是一样的。

我的问题是：

  1. 你想实现什么动画？
  2. 您是否希望从下拉选项之一触发操作？
  3. 你打算有两个文件吗？一个 .html 和一个 .css 或者只是将所有代码放在 .html 中并拥有一个文件？

我修复了所有代码并让它按照我认为你想要做的事情工作，但这是假设我做了你想要的。

杰森，

于 2013-04-24T23:38:55.227 回答
0

这真的是错误的 webkit 动画，我想你需要使用这个代码

<html>
<body>
<style type="text/css">
#backgroundContainer {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
background-color: #CCC;
background-attachment: fixed;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png") ;


border-top: solid 10px #000;
    color: #fff;
    font-size: 14px;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0 25px;
    height:500px;
    width:100%;
    -webkit-animation: moveUpDown 20s infinite linear;
    z-index:6;
}
@keyframes moveUpDown {
    0% {
        background-position-y: 25%;
    }
50% {
        background-position-y: 100%;
    }
100% {
        background-position-y: 25%;
    }
}
@-webkit-keyframes moveUpDown {
0% {
background-position-y: 25%;
}

50% {
        background-position-y: 100%;
    }
100% {
        background-position-y: 25%;
    }
}
.select{
    position: relative;
    z-index: 10;
}
&lt;/style&gt;
&lt;div style="position:relative; z-index:9;"&gt;
&lt;div id="backgroundContainer"&gt;
    &lt;/div&gt;
    &lt;div class="two"&gt;
&lt;select class="select"&gt;
&lt;option class="one" value=""&gt;-- Select a Test Case --&lt;/option&gt;
&lt;option class="one" value="1"&gt;Test1&lt;/option&gt;
&lt;option class="one" value="2"&gt;Test2&lt;/option&gt;
&lt;option class="one" value="3"&gt;Test3&lt;/option&gt;
&lt;option class="one" value="4"&gt;Test4&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
</html>
</body>

还

我尝试使用这个：

动画播放状态：暂停；

-webkit-动画播放状态：暂停；/* Safari 和 Chrome */

它不是选择元素的重新区域

于 2013-04-29T13:07:16.563 回答
0

麦克风，

这是一些代码。您可以将框留在原处，只需遵循CSS 规则就可以了。

CSS3：

#backgroundContainer {
   width:100%;
   height:500px;
   position:relative;
   background: #CCCCCC url("https://appharbor.com/assets/images/stackoverflow-logo.png") no-repeat;
   animation: myOption 5s infinite linear;
   -webkit-animation: myOption 5s infinite linear; 
     }

@-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

/* Safari and Chrome */
@-webkit-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

这是html。

    <!DOCTYPE html>
    <html lang="en">
    <!-- <head>
      <link rel="stylesheet" type="text/css" href="css/bgContainer.css" /> 
    </head> -->
      <div id="backgroundContainer">
        <select >
            <option id="select" value="">-- Select a Test Case --</option>
                <option id="ov1" value="1">Test1</option>
                <option id="ov2" value="2">Test2</option>
                <option id="ov3" value="3">Test3</option>
                <option id="ov4" value="4">Test4</option>
                <option id="ov5" value="5">Test5</option>
                <option class="ov6" value="6">Test6</option>
                <option id="ov7" value="7">Test7</option>
                <option id="ov8" value="8">Test8</option>
                <option id="ov9" value="9">Test9</option>
                <option id="ov10" value="10">Test10</option>
        </select>
      </div>  
    </html>

You'll have to reset your timer, and your CSS import link, I didn't want to wait 240s every time I ran it.

该代码在这里：CodePen

网络平台.org

W3C.org

杰森，

于 2013-04-27T04:31:32.823 回答
0

我只想说我在客户的网站上遇到了类似的问题——当您尝试进行选择时，他们的选择元素的选择突出显示会跳来跳去，但仅限于 Chrome，然后仅限于 Windows。

我尝试了几个小时来解决这个问题，包括将所有选择元素的 -webkit-animation 设置为 none，但似乎没有任何效果，而且我也没有看到任何动画被设置。

好吧，长话短说，在整个页面（在 html 元素上）设置了一个 -webkit-animation！删除后，它解决了问题。

我只是想分享一下，以防其他人将来遇到这样的问题。

于 2013-06-04T23:13:40.493 回答