Question

我正在尝试在焦点上重新创建apple.com弹性搜索框。我已经开始工作但是我的背景图像延伸到了它们的接缝处，在没有放大镜拉伸的情况下优雅地添加它。他们也设法将一个背景淡入另一个背景。

这是我的CSS

#header input {
    background:url(http://www.golfbrowser.com/images/icons/search.png) no-repeat top right;
    padding:2px;
    margin-top:8px;
    margin-right:10px;
    padding-left:18px;
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:12px;
    color:#222;
    border:0px;
    background-color:none;
    float:right;
    width:140px;
    background-size:160px 20px;
}
#header input:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) no-repeat top right;
    transition: width 0.5s, background-size 0.5s, background 0.5s;
    -moz-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -webkit-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -o-transition: width 0.5s, background-size 0.5s, background 0.5s;
    width:180px;
    background-size:200px 20px;
}
#header input:blur {
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
    width:140px;
    background-size:160px 20px;
}

有关实施，请参阅http://www.golfbrowser.com/

Answer 1

如果将其添加到列表中，背景颜色也可以转换。至于背景图像gecko2.0有一个已知问题，只能转换渐变图像。

希望这会有所帮助：）

Answer 2

我看不到你的放大镜在拉伸。在Chrome中我看起来很好。你有没有得到这个CSS的地方吗？

Apple的代码方法与您的略有不同。当搜索框被聚焦时，他们使用javascript将类“searchmode”添加到nav元素。这允许他们调整/转换所有内容。全CSS方法受到以下事实的限制：伪类（实际上没有CSS选择器）永远不会影响父元素甚至是DOM中所选元素之前的兄弟元素。我看到的一个行为差异是你的盒子在悬停时变成白色，苹果的盒子一直保持白色直到它被选中。我很确定你是这么想的。

BTW，你无法过渡背景图片，期间。这包括背景渐变。这不是一个已知的问题，只是规范的一个事实。

使用CSS3过渡模拟Apple.com搜索范围

2 个答案: