無盡的動畫CSS傾斜漸變背景

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ff2f0f), color-stop(50%,#f42f58)); 
background: -webkit-linear-gradient(45deg, #ff2f0f 0%,#f42f58 50%);

Exmaple on jsfiddle我們現在擁有的東西。我們想知道是否可以慢慢地將背景設置爲動畫，使其更加有趣，而不僅僅是顯示靜態漸變。任何想法都歡迎！無盡的動畫CSS傾斜漸變背景

來源

2013-11-20 Tobias

應該是什麼動畫的第二_state_？我的意思是，梯度應該從我們在代碼中看到的動畫變成..什麼？ – matewka

這是一個旋轉漸變背景。 http://jsfiddle.net/f5v5d/

HTML

<div id="bgwrap"><div id="bg"></div></div> 
<h3>Fancy Backgrounds For Everyone!</h3>

CSS

#bgwrap { 
    position:fixed; 
    left:0;top:0;right:0;bottom:0; 
    overflow: visible; 
    z-index:-1; 
} 
#bg { 
    position:absolute; 
    left:0;top:0;width:100%;height:100%; 
    padding:0;margin:0; 
    border-radius: 50%; 
    background: linear-gradient(45deg, red, gray, red); 
    animation: spin 5s linear infinite; 
    -moz-animation: spin 5s linear infinite; 
    -webkit-animation: spin 5s linear infinite; 
    -ms-animation: spin 5s linear infinite; 
} 

@keyframes spin { 
    from { transform: scale3d(2,2,1) rotateZ(0deg); } 
    to { transform: scale3d(2,2,1) rotateZ(360deg); } 
} 
@-moz-keyframes spin { 
    from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); } 
    to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); } 
    to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); } 
} 
@-ms-keyframes spin { 
    from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); } 
    to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); } 
}

來源

2013-11-20 17:01:59

如果您想使用CSS動畫，您不能爲自己設置動畫漸變 - 它們是由瀏覽器創建的圖像，而不是CSS屬性 - 但您可以爲影響它們的屬性設置動畫效果，如background-size和background-position。

This post有更多的細節，以及有用的examples。

如果您想使用JavaScript，您當然可以隨時隨地輕鬆更改漸變的各個屬性。但那是另一個問題。

來源

2013-11-20 16:43:26 Nate

無盡的動畫CSS傾斜漸變背景

回答

相關問題