Custom CSS 로딩 애니메이션 색상 : LDS-Ripple을 예로 들어 보겠습니다.

이 기사는 CSS로드 애니메이션 (예 : LDS-Ripple)의 색상을 사용자 정의하는 방법에 대해 자세히 설명합니다. 핵심은 애니메이션의 시각적 프리젠 테이션 메커니즘을 이해하고 로더 링 효과의 색상을 쉽게 사용자 정의하기 위해 색상 속성을 오용하는 대신 .lds-rupple div 스타일 규칙에서 테두리 속성 값을 수정하는 것입니다.

CSS 로딩 애니메이션의 구성 및 색상 메커니즘 이해

웹 개발에서 CSS로드 애니메이션 (프리 로더)은 종종 사용자 경험을 향상시키고 컨텐츠가로드되고 있음을 사용자에게 알리는 데 사용됩니다. 이러한 많은 애니메이션, 특히 원이나 선으로 구성된 애니메이션은 색상 속성에 의해 제어되지 않지만 요소의 테두리 또는 배경 속성을 영리하게 악용하는 시각적 효과를 가지고 있습니다.

일반적인 LDS- 리플로드 애니메이션을 예로 들어, 팽창하고 사라지는 두 개의 둥근 경계를 통해 파급 효과를 시뮬레이션합니다. 색상을 변경하려고 할 때는 색상 속성을 직관적으로 수정하려고 시도 할 수 있지만 LDS- 리플의 애니메이션 링은 DIV 요소의 테두리 속성에 의해 렌더링되므로 색상 속성 (주로 텍스트 색상에 영향을 미치는)은 작동하지 않습니다. 따라서 이러한 고리의 색상을 변경하려면 이러한 고리를 생성하는 테두리 특성을 정확하게 수정해야합니다.

핵심 수정 : 위치 및 조정 테두리 속성

LDS- 리플로드 애니메이션에 대한 색상을 설정하려면 키는 링 테두리를 정의하는 CSS 규칙을 찾고 국경 값을 수정하는 것입니다.

LDS-Ripple의 CSS 정의에서 .LDS-Ripple DIV 선택기는 경계를 포함하여 각 애니메이션 링의 기본 스타일을 정의하는 데 도움이됩니다. 원래 코드는 일반적으로 테두리와 같은 기본 테두리 색상을 설정합니다. 4px solid #fff;. 여기 #ffff (흰색)는 링의 색상의 소스입니다.

수정 단계 :

1. CSS 스타일 시트에서 .lds-Ripple div를 정의하는 규칙을 찾으십시오.
2. 이 규칙의 테두리 속성 값을 기대하는 색상으로 수정하십시오. 예를 들어 로더가 빨간색으로 나타나려면 #ffff를 빨간색, #ff0000 또는 RGB (255, 0, 0)로 바꿀 수 있습니다.

샘플 코드

다음은 색상 수정이 포함 된 전체 HTML, CSS 및 JavaScript 예제입니다.

 


<meta charset="utf-8">
<meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
<title> 사용자 정의 CSS로드 애니메이션 색상 </title>

/* 전체 로더 컨테이너의 스타일*/
#loader {
  디스플레이 : 없음; /* 기본적으로 숨기기*/
  정당화 컨텐츠 : 센터;
  정렬 구조 : 센터;
  너비 : 100%;
  높이 : 100%;
  테두리 : 녹색 고체 1px; /* 로더 색상과 관련이없는 샘플 테두리*/
  불투명도 : 0.9;
  배경색 : Whitesmoke;
  위치 : 절대;
  왼쪽 : 0;
  상단 : 0;
  Z- 인덱스 : 9999; /* 로더가 최상위 레벨에 있는지 확인*/
 }

/* LDS- 리플 애니메이션 컨테이너 스타일*/
.lds-ripple {
  디스플레이 : 인라인 블록;
  위치 : 상대;
  너비 : 80px;
  높이 : 80px;
}

/* 애니메이션을 구성하는 각 DIV 요소의 스타일*/
.lds-Ripple div {
  위치 : 절대;
  / * 키 수정 : #ffff에서 desired_color로 테두리 색상을 변경 */
  테두리 : 4px 솔리드 레드; /* 여기로 로더 색상을 빨간색으로 설정*/
  불투명도 : 1;
  국경-라디우스 : 50%;
  애니메이션 : LDS-Ripple 1S Cubic-Bezier (0, 0.2, 0.8, 1) 무한;
 }

/* 인터리빙 효과를 만드는 데 사용되는 두 번째 애니메이션 DIV의 지연*/
.lds-ripple div : nth-Child (2) {
  애니메이션 -지연 : -0.5s;
}

/* 애니메이션 키 프레임 정의*/
@keyframes lds-ripple {
  0% {
    상단 : 36px;
    왼쪽 : 36px;
    너비 : 0;
    높이 : 0;
    불투명도 : 0;
  }
  4.9% {
    상단 : 36px;
    왼쪽 : 36px;
    너비 : 0;
    높이 : 0;
    불투명도 : 0;
  }
  5% {
    상단 : 36px;
    왼쪽 : 36px;
    너비 : 0;
    높이 : 0;
    불투명도 : 1;
  }
  100% {
    상단 : 0px;
    왼쪽 : 0px;
    너비 : 72px;
    높이 : 72px;
    불투명도 : 0;
  }
}
스타일>



<button id="btnshow" onclick="showloader ()"> show loader </button>

<div id="로더">
  <div class="lds-ripple">
    <div> </div>
    <div> </div>
  </div>
</div>

<cript>
함수 showloader () {
  document.getElementById ( "로더"). style.display = "flex";
  // 시뮬레이션로드가 완료된 후 로더를 숨기십시오. settimeout (() => {
    // document.getElementById ( "loader"). Style.display = "none";
  }, 3000);
}
스크립트>


</cript>

위 내용은 Custom CSS 로딩 애니메이션 색상 : LDS-Ripple을 예로 들어 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!