순수한 CSS의 색상 혼합

보라색과 같은 빨간색과 파란색 ... 맞습니까?

CSS에서 이것을 표현하는 방법은 무엇입니까? 쉽지 않습니다. Color-Mix 함수에 대한 초안 제안이 있고 Chrome도 관심을 보이지만, 당신 앞에는 바로 앞에있는 것 같습니다. 디자이너가 색상에서 작업 할 때 더 많은 유연성을 제공하므로 기본 CSS 색상 믹싱을 갖는 것이 좋습니다. 예를 들어, 단일 기본 색상의 톤 변화를 만들어 설계 팔레트를 형성 할 수 있습니다.

그러나 이것은 CSS- 트릭이므로 몇 가지 CSS 트릭을합시다.

CSS에는 숫자 조작을 위해 calc () 함수가 있습니다 . 그러나 hsl () 및 rgb ()와 같은 일부 색상 형식이 숫자 인 경우에도 색상을 직접 조작하는 방법은 거의 없습니다.

애니메이션과 색상을 혼합하십시오

CSS를 사용하여 한 색상과 다른 색을 전환 할 수 있습니다. 이것은 작동합니다 :

 div {
  배경 : 파란색;
  전환 : 0.2S;
}
div : 호버 {
  배경 : 빨간색;
}

다음은 애니메이션 사용의 예입니다.

 div {
  배경 : 파란색;
  전환 : 0.2S;
}
div : 호버 {
  애니메이션 : 변경 색상 0.2s 포워드;
}

@keyframes Change-Color {
  에게 {
    배경 : 빨간색;
  }
}

이것은 색상이 빨간색과 파란색으로 이동하는 것을 볼 수있는 무한히 실행되는 키 프레임 애니메이션입니다. 콘솔을 열고 페이지를 클릭하십시오 - JavaScript조차도 애니메이션의 정확한 지점에서 현재 색상을 알려줄 수 있습니다.

그렇다면 애니메이션 중간에 잠시 멈추면 어떨까요? 컬러 믹싱 작업! 이것은 1 초 동안 0.5 초의 지속 시간의 일시 정지 애니메이션이므로 중간에 있습니다.

우리는 -0.5s의 애니메이션 지연을 설정하여이를 수행합니다. 빨간색과 파란색 사이의 반은 얼마입니까? 보라. 두 가지 색상의 백분율을 지정하도록 애니메이션 지연을 조정할 수 있습니다.

이것은 Chromium 커널 브라우저 및 Firefox와 함께 작동합니다. Safari에서는 애니메이션 과정을 변경하여 브라우저가 애니메이션 진행 상황을 다시 계산하도록 강제로 변경해야합니다.

이 트릭은 또한 알파 채널을 색상에 추가하는 데 사용될 수 있으며, 이는 종종 테마 디자인에 유용합니다.

CSS 사용자 정의 속성에 혼합 색상을 추가하십시오

지금까지 이것은 영리한 속임수이지만 혼합 색상을 사용하는 데 필요한 요소에 애니메이션을 적용한 다음 @keyframes에서 변경하려는 모든 속성을 설정해야합니다.

여러 CSS 기능을 추가하면이 기능을 향상시킬 수 있습니다.

1. @property 유형의 CSS 사용자 정의 속성을 사용하여 색상으로 애니메이션 할 수 있도록 적절한 색상으로 만들 수 있습니다.
2. sass @function을 사용하여 특정 지점에서 키 프레임을 쉽게 호출하십시오.

이제 우리는 여전히 애니메이션을 호출해야하지만 결과는 다른 속성에 맞춤 속성을 사용할 수 있습니다.

위 내용은 순수한 CSS의 색상 혼합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!