배경 효과를 만드는 방법

Question

우선 질문이 대답하기에 너무 넓 으면 사과하지만 우선 접근 방향이 필요합니다. (빨간색 줄무늬 배경) 같은 배경 애니메이션을 만드는 방법 : link

저는 CSS 애니메이션을 배우고 있으며, 이와 같은 효과를 얻기 위해 접근 할 수있는 방향을 알고 싶었습니다.

Answer 1

그들은 모든 종류의 소용돌이를 움직이지는 않습니다. 실제로 그렇게 생각하는 패턴입니다. 그것은 최대 및 애니메이션 배경 이미지 아래 :

이미지와

가능한 해결 방법 (일할 수있는 이동 아무것도하지만) 배경 :

#example{ 
    background-image: url('https://trionndesign.com/images/creativeBg.jpg'); 
    animation-name: backgroundscroller; 
    animation-duration: 12s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@keyframes backgroundscroller { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

---

비 무한 반복의 많은 애니메이션은 이전과 이후에 작동합니다. 0 스크롤로 시작하여 100 % 스크롤로 끝납니다. 또는 1 개의 불투명도와 1 개의 불투명도. 트릭은 그것을 알아내는 것입니다. 애니메이션을 적용 할 속성은 무엇이며 CSS 'transition으로 적용해야합니다.

무한 애니메이션의 경우 위와 같은 고급 예제가 필요합니다.