CSS轉換：向右移動

我必須創建一個響應式網站，並且當我將瀏覽器縮小到指定的大小時，我需要左側的徽標向右移動以使其位於中心。CSS轉換：向右移動

下面是我想要實現的transition的示例。它是在「2.動畫你的轉換」框1

我知道過渡開始懸停，但有可能在瀏覽器調整大小時激活它嗎？或者任何其他方法？

2013-01-07 NLimbu

爲什麼你想要一個轉換。瀏覽器調整大小的唯一原因是屏幕（視口）的作用。我的意思是：沒有人會手動調整瀏覽器的大小，除非你正在調試你自己的網站，或者在其他網站上看魔術來檢查網站是否響應。沒有其他理由可以爲您的普通用戶發生像您這樣的病例。那麼爲什麼在你的代碼中爲這個0.5％的設計師提供了無用的CSS，並且想要檢查它是否具有響應性？但是，只是爲了支持你的問題。你已經嘗試了什麼？ – Jelmer

你的意思是你想讓這個標誌在中心的位置？爲什麼你不使用'margin-left：auto;'和'margin-right：auto;' – gamehelp16

很好的一點Jelmer，因爲我剛剛進入響應式設計或網頁設計領域，和@ gamehelp16，謝謝你也有幫助！ – NLimbu

您可以通過使用CSS3過渡和@media查詢的混合物做到這一點。

div 
{ 
    height: 100px; 
    width: 200px; 
    position: relative; 
    background-color: #eee; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

@media all and (min-width: 400px) { 
    div 
    { 
    background-color: #fc3; 
    left: 100px; 
    } 
}

這樣做是設定與相對位置的元素有關的過渡，但顯然不解僱他們（因爲沒有：懸停或其他選擇），並聲明在位置的變化（left: 100px;）當瀏覽器寬度超過400像素。使用max-width表示「超過」值。

很明顯，您需要將值更改爲您所需的值，但這是應該如何完成的。

http://jsfiddle.net/AvhvD/

來源

2013-01-07 08:38:10 Kyle

下面是我會做：

1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... } 
2: @media (...) { 
    .logo { 
    margin-left: 0; 
    } 
}

來源

2013-01-07 08:31:37 simoncereska

我明白了！這就是我想知道的。乾杯:) – NLimbu

我在想，你能在JavaScript和jQuery的條件語句將測試以下是真實的：如果調整瀏覽器窗口和瀏覽器窗口的大小是一個範圍之間，添加一個CSS類。如果不刪除css類。

創建了這個新類，也許你可以使用CSS3製作動畫。我不太熟悉，如果這可以工作，但你總是可以恢復到JQuery。

此外，我不知道是否可以在媒體查詢中應用轉換。如果是這樣，我是一個大支持者，並強烈建議使用它們。

希望我能幫上忙。

來源

2013-01-08 00:02:39

CSS轉換：向右移動

回答

相關問題