CSS動畫移動和改變顏色

-2

我不熟悉CSS動畫。我的客戶想要達到the following result徘徊在contact按鈕時：CSS動畫移動和改變顏色

所以要清楚：

方的舉動由左到右，反之亦然
當方移動，線下它的變化顏色

頂部圖像它是開始狀態，中間是效果期間（50％），底部圖像是結束階段。

這是可以實現的只有CSS或我是否也需要JS？我會如何解決這個問題？

來源

2016-07-28 Boris Kamp

它只能通過CSS實現。你可以分享你的代碼到目前爲止？你自己嘗試過嗎？你有什麼東西嗎？這裏的人將很樂意爲您提供幫助，但不要從頭爲您編寫代碼:-) –

使用css。 js不需要 –

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

我創建了一個快速和骯髒的jsfiddle這裏：https://jsfiddle.net/x0b397pb/

正如你所看到的，也可以只用CSS。在這個例子中，我使用僞元素（::before和::after）來創建大部分元素。

你提到「我不熟悉CSS動畫」。 For this I used transitions.

transition: left 1000ms, right 1000ms, box-shadow 1000ms;

每個逗號分隔元件是將2個點之間轉換的值。此轉換髮生在div的更改上，這可以在懸停時進行，也可以在應用另一個div時（通過JS）進行。

爲了創建顏色漸變的線條效果，我使用了另一個在原始兩行上滑動的元素。新的線最初有0寬度，但在懸停時它們獲得100％的寬度。隨着轉換transition: width 1000ms;這種情況逐漸發生。

儘量不要使用我的代碼作爲最後的例子，因爲它有點難看。但我希望它能得到重點。

來源

2016-07-28 09:40:53

謝謝米切爾，結果似乎是我想要的實現。我將深入瞭解週末後的工作情況，並回復您的回答。 –

嗨Mitchel，我讀了你的代碼，並且完全理解它是如何工作的，如果你問我，就寫得很聰明。請問我爲什麼認爲這不是最終的代碼準備？ –

@BorisKamp這主要是因爲它有點粗糙和無組織。它也不完全響應。更改每個立方體的大小將導致必須更改更多值。總而言之，這不是太糟糕，但是一點清理工作不會受到傷害。 –

這裏是CSS過渡的一個小示範：

考慮這個HTML：

<div class="container"> 
    <div class="box"></div> 
</div>

利用該CSS：

.container { 位置：相對; width：400px; height：400px; 邊框：實心1px黑色; } .box {position：absolute; width：40px; height：40px; top：10px; left：10px; background-color：red; transition：all 1s; } .container：hover { border-color：blue; .box { top：200px; left：200px; width：160px; height：160px; background-color：blue; }
}

或者，檢查它的jsfiddle：https://jsfiddle.net/ronency/75ozjq3s/

來源

2016-07-28 09:39:49

CSS動畫移動和改變顏色

回答

相關問題