Einführung in zwei Methoden zur Implementierung eines Fortschrittsbalkens mit CSS3-CSS-Tutorial-php.cn

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:

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

Die erste Haltung ist wie folgt

Geben Sie zuerst den Code ein

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Rendering:

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

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.

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Der folgende Effekt

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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.

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

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

Nach dem Login kopieren

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

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

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

Einführung in zwei Methoden zur Implementierung eines Fortschrittsbalkens mit 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

这是整体的效果

Einführung in zwei Methoden zur Implementierung eines Fortschrittsbalkens mit 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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!