그라데이션 배경 애니메이션은 배경색에 생명을 불어넣는 훌륭한 디자인 기법이 될 수 있습니다. 사이트 웹. 느리게 로드되는 비디오 배경에 의존하지 않고 정적 배경색보다 더 사실적인 것을 원하는 사람들에게 완벽한 솔루션입니다. 그라디언트 배경 애니메이션의 기본 아이디어는 CSS를 사용하여 확대를 만들고 그라디언트 배경에 애니메이션을 적용하여 부드럽게 움직이는 색상 전환을 만드는 것입니다.
이 튜토리얼에서는 Divi에서 그라데이션 배경 애니메이션을 만드는 방법을 보여줍니다. 이 방법은 통합 된 Divi 설정에서 선택한 그라디언트 색상을 애니메이션하는 사용자 정의 CSS 스 니펫을 결합합니다. 구성은 실제로 이러한 아름다운 결과를 위해 매우 간단합니다.
시작하자!
가능한 결과
다음은 Divi에서 그라디언트 배경 애니메이션을 만들 수있는 두 가지 방법에 대한 개요입니다.
물론 이 튜토리얼의 전제 조건은 디비 테마 설치되고 최신 상태입니다.
CSS 추출 및 Divi의 배경 옵션을 사용하여 그라데이션 배경 애니메이션 만들기
시작하려면 Divi Builder의 기본 섹션에 한 열의 행을 추가하십시오.
섹션 설정
그런 다음 배경 이미지로 섹션 설정을 업데이트합니다. 이 이미지와 겹치도록 그라데이션 배경이 선에 추가됩니다.
그런 다음 다음과 같이 채우기를 업데이트하십시오.
- 패딩 : 0px 높이, 0px low
행 및 열 설정
열 매개 변수
행 설정을 연 후 다음과 같이 열 채우기를 업데이트하십시오.
- 패딩 : 12vw 이상
그런 다음 기본 열 요소에 다음 사용자 정의 CSS를 추가하십시오.
height: 40vw;
라인 설정
그라데이션 배경
이제 선에 그라데이션 배경을 추가 할 수 있습니다. 섹션의 배경 이미지를 보려면 그라디언트 색상을 반투명하게 만드십시오.
다음과 같이 라인 매개 변수를 업데이트하십시오.
- 왼쪽 그라데이션 배경색 : rgba (12,113,195,0.8)
- 오른쪽의 그라디언트 배경색 : rgba (131,0,233,0.8)
- 그라디언트 유형 : 선형
- 그라데이션 방향 : 45도
허리
그런 다음 다음과 같이 라인 크기를 업데이트하십시오.
- 너비 : 100 %
- 최대 폭 : 100 %
커스텀 CSS 클래스
이제 그라데이션 배경이 준비되었으므로 사용자 정의 CSS를 통해 애니메이션을 추가해야합니다. CSS 코드를 추가하기 전에 특정 행을 대상으로하는 사용자 정의 CSS 클래스를 추가해야합니다.
고급 탭으로 이동하여 다음 CSS 클래스를 추가하십시오.
- CSS 클래스 : 애니메이션 그라데이션
코드 모듈 추가
CSS 클래스가 라인에 추가되면 코드 모듈을 라인에 추가하십시오.
코드 모듈에 CSS 붙여 넣기
그런 다음 코드 코드 설정 모듈 영역에 다음 CSS 코드를 붙여 넣습니다.
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
코드를 <style></style>페이지의 HTML 코드에 추가하기 때문입니다.
결과
지금까지의 결과입니다. 그라데이션 배경은 원래 크기의 400 %로 확대되었으며 왼쪽과 오른쪽으로 움직여 애니메이션이 적용됩니다.
클릭 유도 문안 추가
디자인을 마무리하려면 다음의 일부가 될 클릭 유도 문구 모듈을 추가해 보겠습니다. 내용.
클릭 유도 문안 설정
내용
업데이트 내용 다음과 같이
- 제목 추가
- 버튼 텍스트 추가
- 본문 추가
- 버튼 링크의 URL : #
- 배경색 사용 : 아니오
임신
디자인 탭으로 이동하여 다음을 업데이트하십시오.
- 제목 글꼴 : Kaushan Script
- 제목 텍스트 크기 : 4vw (데스크톱), 30px (전화)
- 제목 줄 높이 : 1,4 em
- 경찰 : Roboto
- 버튼 텍스트 크기 : 16px
- 버튼 텍스트 색상 : # 555555
- 버튼 배경 : #ffffff
- 버튼 테두리 너비 : 0px
- 버튼 테두리 반경 : 30 픽셀
- 버튼 문자 간격 : 3px
- 버튼 글꼴 : 로봇 압축
- 버튼 글꼴 무게 : 굵게
결과
이제 라이브 페이지에서 결과를 확인하세요. 내용 행동 촉구가 마련되어 있습니다. 이것은 귀하의 광고에 훌륭한 헤더가 될 것입니다. 사이트 웹 !
선의 배경색을 원하는대로 쉽게 변경할 수 있습니다. 코드는 백그라운드에서 계속 실행되어 백그라운드에 애니메이션을 적용합니다.
CSS에 대해 조금 알고 있다면 애니메이션 속성의 값을 변경하여 애니메이션의 속도와 방향을 조정할 수 있습니다.
이 튜토리얼이 도움이 되었기를 바랍니다. 그것에 대한 당신의 의견을 주저하지 마십시오.
