使用CSS添加漸變背景

我決定在漸變背景上重複旋轉一些東西。我已經有了「旋轉反覆」的部分，但漸變背景不起作用。使用CSS添加漸變背景

HTML：

<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<div id="css-gradient"></div>

CSS：

img { 
    animation-name: rotate; 
    animation-iteration-count: infinite; 
    animation-duration: 1s; 
    animation-direction: reverse; 
    animation-timing-function: ease-in; 
    animation-play-state: running; 
    float: left 
} 

@keyframes rotate { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 

    #css-gradient { 
     background: linear-gradient(blue, white) 
     height: 100px; 
     width: 100px; 
    } 
}

我還張貼作爲一個小提琴，所以你可以看到它在行動：

https://jsfiddle.net/ywtfsju1/

來源

2015-12-26 Mike

大家好，歡迎堆棧溢出！通常情況下，您希望在帖子中發佈代碼（儘管爲了方便起見添加小提琴也很好）。您不需要重複按空格，您可以選擇代碼並在編輯器中按下「{}」圖標，或者按Ctrl-K，它將格式化爲您的代碼塊。在這篇文章中，我已經爲你做了這件事，但如果你格式化原文，將來會更簡單。 –

你的括號中有一些錯誤，這裏是工作小提琴：https://jsfiddle.net/ywtfsju1/1/

#css-gradient {在@keyframes rotate {，不是它在它之後。

您應該使用代碼縮進爲了避免這種錯誤

來源

2015-12-26 22:52:30 CoderPi

感謝代碼，但現在圖像分層漸變，我試過z索引和移動代碼的命令，它沒有工作。 jsfiddle爲了方便https://jsfiddle.net/yw2me6oa/3/我想讓它變得像梯子一樣起着圖片的背景。 – Mike

那樣？ https://jsfiddle.net/3L80odw0/1/ – CoderPi

你先生是魔術師。謝謝:) – Mike

使用CSS添加漸變背景

回答

相關問題