CSS를 통한 진행률 표시 줄의 중간에 뛰어난 효과를 달성하는 방법은 무엇입니까?

CSS 진행률 바가운데의 강조 효과를 실현하는 기술

프론트 엔드 개발에서는 종종 진행률 표시 줄의 중간에 시각적 하이라이트를 만들 필요가 있습니다. 이 기사는 CSS를 사용 하여이 효과를 달성하는 간결한 방법을 소개합니다.

다음 그림은 대상 효과를 보여줍니다. 중간 돌출부가있는 진행률 표시 줄.

이 효과를 달성하기 위해 CSS 유사 요소 및 선형 구배를 영리하게 사용할 수 있습니다. 특정 방법은 다음과 같습니다.

 .progress-bar {
  위치 : 상대; /* 키 : 의사 요소의 절대 포지셔닝 허용*/
}

.progress-bar :: 이후 {
  콘텐츠: '';
  위치 : 절대;
  상단 : 0;
  오른쪽 : 50%; /* 또는 왼쪽 : 50%, 필요에 따라 위치 조정*/
  높이 : 100%;
  너비 : 1REM; /* 돌출 부분의 너비 조정*/
  배경 : 선형 등급 (오른쪽, RGBA (255,255,255,0), RGBA (255,255,255,1), RGBA (255,255,255,0)); /* 투명한 화이트 트랜스 펜트 그라디언트*/
  변환 : translatex (0.5rem); /* 돌출 부분을 중앙에있는 위치를 미세 조정하십시오*/
}

코드 설명 :

• .progress-bar : 설정 position: relative 요소 ::after 에 절대적으로 배치 될 수 있도록 상대적으로.
• .progress-bar::after : 진행률 표시 줄에 덮어 쓰는 의사 요소를 만듭니다.
  • content: '' : 빈 콘텐츠로 설정합니다.
  • position: absolute : 절대 포지셔닝을 사용하십시오.
  • top: 0 , right: 50% : 의사 요소를 진행률 표시 줄의 오른쪽 중간에 위치시킵니다. 왼쪽의 중간에 위치하고 설계에 따라 조정하기 위해 left: 50% 사용할 수도 있습니다.
  • width: 1rem : 투영 너비를 설정하고 필요에 따라 조정할 수 있습니다.
  • background: linear-gradient(...) : 선형 그라디언트를 사용하여 투명에서 흰색에서 흰색으로의 전환 효과를 생성하여 두드러지는 느낌을 얻으십시오. rgba 기능을 사용하면 투명성을 제어 할 수 있습니다.
  • transform: translateX(0.5rem) : 돌출 부분이 정확하게 중앙에 있는지 확인하기 위해 위치를 미세 조정하십시오. 이 값은 width 에 따라 조정해야합니다.

이 방법은 간단하고 효율적이며 원하는 효과를 달성하기 위해 소량의 CSS 코드 만 있으면됩니다. 실제 진행률 막대 스타일 및 설계 요구 사항에 따라 width 및 right 또는 left 속성 값과 같은 매개 변수를 조정해야합니다.

위 내용은 CSS를 통한 진행률 표시 줄의 중간에 뛰어난 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!