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

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

집

웹 프론트엔드

CSS 튜토리얼

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

Linda Hamilton

Apr 05, 2025 pm 03:33 PM

css 절대 위치

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

라라벨 튜토리얼

1603

PHP 튜토리얼

1506

276

Related knowledge

CSS 배경 필터 속성을 사용하는 방법은 무엇입니까? Aug 02, 2025 pm 12:11 PM

배경 필터는 요소 뒤의 내용에 시각적 효과를 적용하는 데 사용됩니다. 1. 배경 필터 : Blur (10px) 및 기타 구문을 사용하여 프로스트 유리 효과를 달성합니다. 2. 흐림, 밝기, 대비 등과 같은 여러 필터 기능을 지원하며 중첩 될 수 있습니다. 3. 유리 카드 디자인에 종종 사용되며 요소가 배경과 겹치도록해야합니다. 4. 현대식 브라우저는 지원이 좋으며 @Supports는 다운 그레이드 솔루션을 제공하는 데 사용될 수 있습니다. 5. 성능을 최적화하기 위해 과도한 흐림 값과 빈번한 다시 그리기를 피하십시오. 이 속성은 요소 뒤에 내용이있는 경우에만 적용됩니다.

사용자 에이전트 스타일 시트 란 무엇입니까? Jul 31, 2025 am 10:35 AM

사용자 에이전트 스타일 시트는 브라우저가 자동으로 적용되는 기본 CSS 스타일입니다. 사용자 정의 스타일을 추가하지 않은 HTML 요소가 여전히 기본적으로 읽을 수 있습니다. 페이지의 초기 모양에 영향을 미치지 만 브라우저간에 차이가있어 일관성이없는 디스플레이가 발생할 수 있습니다. 개발자는 종종 스타일을 재설정하거나 표준화 하여이 문제를 해결합니다. 개발자 도구의 컴퓨팅 또는 스타일 패널을 사용하여 기본 스타일을보십시오. 일반적인 커버리지 작업에는 내부 및 외부 마진 청소, 링크 밑줄 수정, 제목 크기 조정 및 통합 버튼 스타일이 포함됩니다. 사용자 에이전트 스타일을 이해하면 크로스 브라우저 일관성을 향상시키고 정확한 레이아웃 제어를 가능하게 할 수 있습니다.

CSS Aspect-Ratio 속성은 무엇이며 사용 방법은 무엇입니까? Aug 04, 2025 pm 04:38 PM

theaspect-ratiocsspropertydefinesthewidth-heightratioofanlement

CSS로 튀는 애니메이션을 만드는 방법은 무엇입니까? Aug 02, 2025 am 05:44 AM

@keyframesBounceWith0%, 100%Attranslatey (0) 및 50%Attranslatey (-20px) torecreateAbasicBounce.2.applyTheAnimationToAnElementUsingAnimation : Bounce0.6Sease-in-outinfiniteforsmooth, Continuous-Motion.3. keyframesricatistic-bouncouswithicwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithictscceit

CSS를 사용하는 방법 : 빈 의사 클래스? Aug 05, 2025 am 09:48 AM

The : emeltypseudo classselectselementswithnochildrenorcontent, suontspacesorcomments, meontrulyemptyelementslikematchit; 1. itcanhideemptycontainersbyusing : empty {display : none;} tocleanuplayouts; 2.itallowsaddingplosederstylingvia :: 이후, wh

창의적인 모양에 CSS 클립 경로를 사용하는 방법은 무엇입니까? Aug 04, 2025 pm 02:55 PM

CSSCLIP-PATH를 사용하여 추가 이미지 나 복잡한 SVG없이 브라우저에서 비류 형태를 만듭니다. 2. 일반적인 형상 함수에는 inset (), circle (), elipse () 및 polygon ()이 포함됩니다. 여기서 Polygon ()는 코디네이션 포인트를 정의하여 사용자 정의 모양을 구현하며 대화 상자 버블과 같은 창의적인 디자인을 만드는 데 적합합니다. 3. Clip-Path는 호버링 중 Circle 확장과 같은 CSS 전환 또는 키 프레임 애니메이션을 통해 동적 효과를 달성 할 수 있지만 동일한 유형의 정점과 정점 수의 inter 자형 애니메이션 만 지원합니다. 4. 응답 성과 접근성에주의를 기울이면 컨텐츠를 지원하지 않을 때는 계속 사용할 수 있도록 텍스트를 읽을 수 있고 과도한 자르기를 피하고 성능을 최적화하기 위해 다각형 정점 수를 제어하십시오. 동시에

CSS 전용 아코디언 메뉴를 만드는 방법? Aug 03, 2025 pm 01:48 PM

숨겨진 확인란 및 CSS를 사용하십시오. 컨텐츠 디스플레이를 제어하기 위해 인접한 형제 자매 선택기 ()와 결합 된 확인 된 의사 클래스; 2. HTML 구조에는 붕괴 된 각 항목에 대한 입력, 레이블 및 컨텐츠 DIV가 포함되어 있습니다. 3. 최대 높이 전환을 설정하여 원활한 확장/붕괴 애니메이션; 4. 의사 요소로 개방/클로즈 상태 아이콘을 추가하십시오. 5. 라디오 유형을 사용하여 단일 개봉 모드를 구현하는 반면, 확인란은 여러 개구부를 허용합니다. 이것은 JavaScript가 필요하지 않고 최신 브라우저와 호환되는 대화식 접이식 메뉴 구현입니다.

가상 통화 거래 앱은 무엇입니까? _ 2025 년 상위 10 개 권장 공식 가상 통화 거래 앱 Aug 08, 2025 pm 06:42 PM

1. Binance는 엄청난 거래량과 풍부한 거래 쌍으로 유명합니다. 다양한 거래 모델과 완벽한 생태계를 제공합니다. 또한 Safu Funds 및 여러 보안 기술을 통해 사용자 자산의 보안을 보장하고 준수하는 운영에 큰 중요성을 부여합니다. 2. OKX OUYI는 광범위한 디지털 자산 거래 서비스 및 통합 거래 계정 모델을 제공하고 Web3 분야를 적극적으로 배포하며 엄격한 위험 관리 및 사용자 교육을 통해 거래 보안 및 경험을 향상시킵니다. 3. Gate.io Sesame은 문을 열고 통화 속도가 우수하고 풍부한 통화를 가지고 있으며, 다양한 거래 도구와 부가가치 서비스를 제공하며, 여러 보안 검증 메커니즘을 채택하고 사용자 신뢰를 향상시키기 위해 자산 준비금의 투명성을 준수합니다. 4. Huobi는 강력한 트랜잭션 깊이 및

See all articles

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

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

핫 AI 도구

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제