찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

高洛峰
高洛峰원래의
2017-03-22 14:51:101313검색

이 글에서는 진행률 표시줄을 구현하기 위해 CSS3를 사용하는 두 가지 자세를 주로 소개합니다. 이 글에서는 모든 사람에게 특정 참조 가치가 있는 자세한 샘플 코드와 그래픽 소개를 제공합니다. 함께 보세요.

렌더링은 다음과 같습니다.

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

첫 번째 자세는 다음과 같습니다

먼저 코드를 입력하세요

<p id="progress">
      <span></span>
</p>
rrree

위의 그라데이션 색상은 css3의 선형 그라데이션을 사용합니다.

linear-gradient 구문 

/*对应CSS*/
    #progress{
           width: 300px;
           height: 30px;
           border:1px solid #ccc;
           border-radius: 15px;
           overflow: hidden;  /*注意这里*/
           box-shadow: 0 0 5px 0px #ddd inset;
    }          
    #progress span {
           display: inline-block;
           width: 70%;
           height: 100%;       
           background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);    
           background-size: 60px 30px;
           text-align: center;
           color:#fff;
           animation:load 3s ease-in;
     }
     @keyframes load{
           0%{
               width: 0%;
           }
           100%{
               width:70%;
           }
       }

  • angle: 각도 값을 사용하여 지정 그라데이션의 방향(또는 각도)).

  • 왼쪽: 오른쪽에서 왼쪽으로 그라데이션을 설정합니다. 해당 항목: 270deg

  • 오른쪽: 그라데이션을 왼쪽에서 오른쪽으로 설정합니다. 해당 항목: 90deg

  • 위로: 그라데이션을 아래에서 위로 설정합니다. 해당 항목: 0deg

  • 아래로: 위에서 아래로 그라데이션을 설정합니다. 에 해당: 180deg. 이는 기본값이며 공백으로 두는 것과 같습니다.

  • color-stop: 그라데이션의 시작 및 끝 색상을 지정하는 데 사용됩니다.

  • color: 색상을 지정합니다.

  • 길이: 길이 값을 사용하여 시작 및 끝 색상 위치를 지정합니다. 음수 값은 허용되지 않습니다.

  • %: 백분율을 사용하여 시작 및 끝 색상 위치를 지정합니다.

밤: 

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

렌더링:

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

애니메이션은 키프레임을 통해 구현되며, 스팬의 폭을 변경하여 진행 효과를 얻는 방법도 간단하지 않나요? !

현재 진행률 표시줄 효과는 70%만 적용됩니다. 아래 그림과 같이 특정 값으로 변경하면 됩니다.

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

제2자세

우선 구조는 A 정사각형 p가 좋습니다. 정사각형을 다음과 같이 왼쪽과 오른쪽 두 조각으로 대칭적으로 나눕니다.

여기에 구성되는 것은 200px 200px의 정사각형을 100px200px의 직사각형 두 개로 나눈 것입니다. 

.test1{
    background: linear-gradient(#EA2000, #E5A399);
}
.test2 {
    background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%);
}
.test3 {
    background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4);
}
.test4{
    background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);   
}
rrree

다음 효과

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

다음으로, 다음과 같이 오른쪽 절반을 먼저 구성하여 각 직사각형에 빈 원을 구성합니다.

<p class="progress2">
        <p class="rect right">
        </p>                               
        <p class="rect left">
        </p>
 </p>
.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        border:1px solid #ddd;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden; /*注意这里*/
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }

은 다음과 같은 효과를 볼 수 있습니다

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

class:Rect에서 오버플로가 Hidden으로 설정되어 있으므로 넘치는 부분은 커버하고, 이후의 효과 구현도 이 속성 관계와 밀접하게 연결되어 있습니다.

이 속성을 설정하지 않으면 이런 효과가 나타납니다.

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

그러면 그 부분이 가려져 있는 것을 볼 수 있는데, 45도 회전시키면 

<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            
        </p>
 </p>

효과는 다음과 같습니다.

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

애니메이션 효과를 구현하는 방법은 오른쪽 절반을 180도 회전한 다음 왼쪽 절반을 180도 회전하여 완전한 효과를 만드는 것입니다. .

先给这右半边设置动画效果，即一开始让其旋转45度，然后旋转180度，由于这只是右半边，所以在50%的时候就应该旋转完毕，之后一直保持不变。

.rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
        animation: load_right 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }

这是没有在class rect中设置overflow：hidden的效果
 

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개
 

这是在class rect中设置了overflow：hidden的效果
 

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개
 

现在，我们就可以把左半边也凑上了，同理，动画效果一开始先旋转45度，调正，然后一直保持不变，到50%之后，再开始旋转180度。这样就与右半边衔接上了。

<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            <p class="circle leftcircle"></p>
        </p>
 </p>
.leftcircle{
        border-bottom:20px solid rgb(41,137,216);
        border-left:20px solid rgb(41,137,216);
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

这是整体的效果
 

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개
 

可以调整角度或者调整颜色即可实现反向的效果。 

我是调整了颜色就可以得到最开始的动画效果啦,下面是完整的代码

<p class="progress2">
        <p class="rect right">
            <p class="circle rightcircle"></p>
        </p>                               
        <p class="rect left">
            <p class="circle leftcircle"></p>
        </p>
 </p>
.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
    .circle{
        width: 160px;
        height: 160px;
        border:20px solid rgb(41,137,216);
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg);
    }
    .rightcircle{
        border-top:20px solid #ccc;
        border-right:20px solid #ccc;
        right:0;
        animation: load_right 5s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid #ccc;
        border-left:20px solid #ccc;
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

CSS3를 사용하여 진행률 표시줄을 구현하는 두 가지 방법 소개

 

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

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

관련 기사

더보기