Eine einfache Implementierungsmethode für den Fortschrittsbalken einer Webseite

Ein sehr einfacher Fortschrittsbalken

Es kann mit einem einfachen CSS-Attribut realisiert werden: cilp

clip：rect(top,right,bottom,left
)

Schreiben Sie zunächst ein kleines Programm, um den

<style>        
.box {            
     width: 200px;           
     height: 20px;            
     background:#ccc;            
     border-radius:10px;           
     position:relative       
      }       
.clip {            
    position: absolute;            
    width: 100%;
   height: 100%;            
   clip: rect(0px,100px,20px,0px);            
   background: red;            
   border-radius:10px;        
   }    
   </style>
<p class=&#39;box&#39;>
    <span class=&#39;clip&#39;></span>
</p>

Anzeigeeffekt zu erklären:

Position hinzufügen: absolut; Breite zu .clip: 100 %; Höhe: 100 %; im Vergleich zum Hinzufügen einer Box mit der gleichen Breite und Höhe innerhalb der Box ist der Hintergrund rot

rect(top, rechts, unten, links), relativ zum vom Kontrollkästchen angezeigten Bereich. Durch Ändern des Werts des Abstands rechts wird der angezeigte Bereich größer

Das obige ist der detaillierte Inhalt vonEine einfache Implementierungsmethode für den Fortschrittsbalken einer Webseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!