Einführung in zwei Methoden zur Implementierung eines Fortschrittsbalkens mit CSS3

Dieser Artikel führt Sie hauptsächlich in die beiden Haltungen der Verwendung von CSS3 zur Implementierung des Fortschrittsbalkens ein. Der Artikel enthält einen detaillierten Beispielcode und eine grafische Einführung, die einen gewissen Referenzwert für alle haben Schauen Sie gemeinsam vorbei.

Die Darstellung ist wie folgt:

Die erste Haltung ist wie folgt

Geben Sie zuerst den Code ein

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

Die obige Verlaufsfarbe verwendet den Linear-Gradient in CSS3

Linear-Gradient-Syntax

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

• Winkel: Winkelwert verwenden Gibt die Richtung (oder den Winkel) des Farbverlaufs an.

• nach links: Stellen Sie den Farbverlauf von rechts nach links ein. Entspricht: 270 Grad

• nach rechts: Stellen Sie den Farbverlauf von links nach rechts ein. Entspricht: 90 Grad

• nach oben: Stellen Sie den Farbverlauf von unten nach oben ein. Entspricht: 0 Grad

• nach unten: Legt den Farbverlauf von oben nach unten fest. Entspricht: 180 Grad. Dies ist der Standardwert, der dem Leerlassen entspricht.

• color-stop: Wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben:

• color: Geben Sie die Farbe an.

• Länge: Verwenden Sie den Längenwert, um die Start- und Endpositionen der Farbe anzugeben. Negative Werte sind nicht zulässig

• Prozentsatz: Verwenden Sie den Prozentsatz, um die Start- und Endpositionen der Farbe anzugeben.
  

Kastanie:

.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:

Animation wird durch Keyframes implementiert und der Fortschrittseffekt wird durch Ändern der Spannweite erreicht. Ist das nicht einfach? !

Der aktuelle Fortschrittsbalkeneffekt ist nur zu 70 % wirksam. Ändern Sie einfach den Wert der Breite, genau wie im Bild unten, auf einen bestimmten Wert.

Zweite Haltung

Zuallererst die Struktur ist gut Ein Quadrat p, teilen Sie das Quadrat wie folgt symmetrisch in zwei linke und rechte Teile auf

Was hier konstruiert wird, ist ein Quadrat mit 200 Pixel und 200 Pixel, das in zwei Rechtecke mit 100 Pixel und 200 Pixel unterteilt ist.

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

Der folgende Effekt

Als nächstes konstruieren Sie in jedem Rechteck einen Hohlkreis, wobei Sie zuerst die rechte Hälfte konstruieren folgt: In rect wird der Überlauf auf versteckt gesetzt, sodass der überlaufende Teil ebenfalls abgedeckt ist.

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

Wenn dieses Attribut nicht festgelegt ist, ist der Effekt wie folgt.

Dann werden Sie feststellen, dass ein Teil davon bedeckt ist. Wir können ihn um 45 Grad drehen, um den Effekt zu erzielen

Wie folgt

Die Art und Weise, wie wir den Animationseffekt erzielen, besteht darin, die rechte Hälfte um 180 Grad zu drehen und dann die linke Hälfte um 180 Grad zu drehen, um den Vorgang abzuschließen die komplette Wirkung.

先给这右半边设置动画效果，即一开始让其旋转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的效果
 

 

这是在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);
        }
    }

 

Das obige ist der detaillierte Inhalt vonEinführung in zwei Methoden zur Implementierung eines Fortschrittsbalkens mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!