CSS3에서 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3 진행률 표시줄 구현 방법 소개

진행률 표시줄은 웹 페이지에서 자주 사용됩니다. 업로드 및 다운로드와 같은 프로세스는 모두 진행률 표시줄 형식으로 표시됩니다. 다음으로 이 문서에서는 CSS3에서 진행률 표시줄을 구현하는 방법을 공유합니다. 관심 있는 친구들이 참고할 수 있습니다. 그것에.

과거에는 진행률 표시줄의 효과를 얻으려면 자바스크립트를 사용해야 했습니다. 그러나 CSS3의 등장으로 div에서 애니메이션을 수행하고 그라데이션을 추가할 수 있게 되었습니다. 아래에서 색상이 있는 요소를 살펴보겠습니다. CSS3가 진행률 표시줄을 구현하는 방법을 자세히 살펴보겠습니다.

Css3에서 애니메이션 애니메이션 제어를 사용하여 진행률 표시줄의 효과를 얻을 수 있습니다. 애니메이션 관련 내용을 간략히 살펴보겠습니다.

구문: 애니메이션: 이름 기간 timing-function Delay iteration-count Direction;

Parameters:

animation-name: 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. . ​

animation-duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다. ​

animation-timing-function: 애니메이션의 속도 곡선을 지정합니다. ​

animation-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다. ​

animation-iteration-count: 애니메이션을 재생해야 하는 횟수를 지정합니다. ​

animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

그럼 css3에서 진행률 표시줄의 간단한 예제 코드를 살펴보겠습니다.

<div class="progress">
    <!--进度条-->
    <div class="loader-container"></div>
</div>

<!--Css3 实现。 animation 动画控制--> 
    html,body{
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .loader-container {
        height: 100%;
        width: 55%;
        background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
        border-radius:7px;
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
        animation: loader 1s linear;
    }
    .progress{
        width: 70%;
        height: 15px;
        border-radius:7px;
        margin-left: 15%;
        margin-top: 30%;
        background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    }
    @keyframes loader {
        0% {
            width: 0%;
        }
        100% {
            width: 55%;
        }
    }

css3 진행률 표시줄 구현 효과는 다음과 같습니다. # 🎜🎜#

위 내용은 이 글의 전체 내용입니다. 위에서 사용된 다양한 CSS3 속성은

css3 학습 매뉴얼#🎜을 참조하세요. 🎜# 자세히 알아보세요.

위 내용은 CSS3에서 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3 진행률 표시줄 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!