끝없이 움직이는 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.

자바 스크립트를 사용하려는 경우 물론 시간 경과에 따른 그래디언트의 개별 속성을 매우 쉽게 변경할 수 있습니다. 그러나 그것은 또 다른 질문입니다.

출처

2013-11-20 16:43:26 Nate

끝없이 움직이는 CSS 경사 그라데이션 배경

답변

관련 문제