집 > 기사 > 웹 프론트엔드 > CSS+js를 사용하여 간단한 동적 진행률 표시줄 효과를 얻는 방법은 무엇입니까? (코드 예)

CSS+js를 사용하여 간단한 동적 진행률 표시줄 효과를 얻는 방법은 무엇입니까? (코드 예)

青灯夜游원래의: 2018-10-31 17:28:464647검색

CSS+JS를 사용하여 간단한 동적 진행률 표시줄을 구현하는 방법은 무엇입니까? 이 글에서는 CSS+JS를 사용하여 간단한 동적 진행률 표시줄 효과를 만들고, 페이지에 동적 진행률 표시줄을 스크롤하여 로드하는 코드를 공유하겠습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

여기서는 CSS3의 애니메이션 애니메이션 속성이 주로 사용된다는 점을 알아야 합니다. 먼저 진행률 표시줄을 초기 너비가 0, 배경색이 녹색, 높이가 컨테이너와 동일한 요소로 설정합니다. 애니메이션 애니메이션 속성을 통해 너비를 전환하여 진행률 표시줄 채우기 효과를 얻습니다.

CSS3의 애니메이션 속성 관련 지식을 살펴보겠습니다.

animation 속성은 6개의 애니메이션 속성을 설정하는 단축 속성입니다.

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

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

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

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

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

동적 진행률 표시줄 효과를 얻기 위한 구체적인 방법

을 살펴보겠습니다

.
간단한 동적 진행률 표시줄 효과를 구현하기 위한 Css+js 코드 예:

html 코드:

<!--外层容器-->
<div id="wrapper">
    <!--进度条容器-->
    <div id="progressbar">
        <!--用来模仿进度条推进效果的进度条元素-->
        <div id="fill"></div>
    </div>
</div>

css 코드:

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

js 코드:

var progressbar={
    init:function(){
        var fill=document.getElementById(&#39;fill&#39;);
        var count=0;
    //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+&#39;%&#39;;
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();

Rendering:

CSS+js를 사용하여 간단한 동적 진행률 표시줄 효과를 얻는 방법은 무엇입니까? (코드 예) 요약: 위 이 글에서는 간단한 동적 진행률 표시줄 효과의 모든 CSS+JS 구현을 소개합니다. 직접 시도해 보고 이해를 깊게 하며 다양한 진행률 표시줄 효과를 만들어 보는 것이 학습에 도움이 되기를 바랍니다.

CSS+js를 사용하여 간단한 동적 진행률 표시줄 효과를 얻는 방법은 무엇입니까? (코드 예)

관련 기사