模擬Apple.com搜索拉伸與CSS3轉換

我想重新創建焦點上的apple.com彈性搜索框。我已經掌握了它的工作原理，但我的背景圖片延伸到了沒有放大鏡拉伸的地方，因爲它們的接縫優雅地增加了它。他們也設法將一個背景淡入另一個背景。模擬Apple.com搜索拉伸與CSS3轉換

這裏是我的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/

來源

2011-05-12 Robin Knight

背景色可以太多，如果你在列表中添加它來轉變。至於背景圖像基於gecko2.0有一個知道的問題，只能過渡漸變圖像。

希望這會有所幫助:)

來源

2011-05-14 20:37:42 sitifensys

我沒有看到你的放大鏡拉伸。在Chrome中我看起來很好。你有沒有得到這個CSS你想要它？

Apple的代碼方法與您的代碼略有不同。他們正在使用JavaScript來將搜索框關注時的類「searchmode」添加到導航元素。這使他們能夠調整/轉換一切。全CSS方法受限於僞類（實際上沒有CSS選擇器）永遠不會影響DOM中所選元素之前的父元素或兄弟元素。我看到的一個行爲差異是，你的盒子懸停在白色，蘋果盒子保持白色，直到它被選中。我很確定你想這樣。

順便說一句，你不能過渡背景圖像，期間。這包括背景漸變。這不是已知的問題，只是規範的一個事實。

來源

2012-05-31 03:17:04 Ben

模擬Apple.com搜索拉伸與CSS3轉換

回答

相關問題