CSS3에서 진행률 표시줄을 구현하는 두 가지 방법

이번에는 CSS3에서 진행률 표시줄을 구현하는 두 가지 방법을 알려드리겠습니다. CSS3에서 진행률 표시줄 구현 시 주의사항은 무엇인가요?

효과 그림은 다음과 같습니다.

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

우선 코드로 가세요

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

/*对应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%;
           }
       }

위의 그라데이션 색상

CSS3에서 선형 사용 -gradient

linear-gradient 구문

<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> ]?

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

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

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

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

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

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

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

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

• percentage: 시작 및 끝 색상 위치를 백분율로 지정합니다.

밤나무:

.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%);   
}

Rendering:

애니메이션은 키프레임을 통해 구현되며, 스팬의 너비를 변경하여 진행 효과를 얻는 것이 간단하지 않습니까? !

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

두 번째 자세

먼저 정사각형 p를 구성하고, 정사각형을 다음과 같이 좌우 대칭으로 두 조각으로 나눕니다.

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

<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;
    }

다음 효과

다음으로 각 직사각형에 속이 빈 원을 만들고 먼저 다음과 같이 오른쪽 절반을 구성합니다.

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

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
    }
    .rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
    }

다음 효과를 볼 수 있습니다

수업 시간에: Rect에서는 오버플로가 숨겨지도록 설정되므로, 이후의 효과 구현도 이 속성 관계와 밀접하게 연결됩니다.

이 속성을 설정하지 않으면 효과는 다음과 같습니다.

그러면 일부가 덮여 있는 것을 볼 수 있습니다. 45도 회전할 수 있습니다.

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg); /*注意这里*/
    }

효과는 다음과 같습니다

애니메이션 효과를 얻는 방법은 오른쪽 절반을 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);
        }
    }

이것은 오버플로를 설정하지 않은 경우의 효과입니다. ect 클래스에 숨겨져 있습니다

 

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

 

现在，我们就可以把左半边也凑上了，同理，动画效果一开始先旋转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);
        }
    }

这是整体的效果
 

 

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

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

<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);
        }
    }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用CSS3实现头像旋转效动画

css的background-attachment进阶使用方法

css做出波纹动画

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