Web-FrontendCSS-TutorialTeilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils
Verwenden Sie CSS3-Border-Radius, Box-Shadow, Transition, -moz-linear-gradient, -webkit-gradient und andere Stile, um einen modischen Fortschrittsbalken zu vervollständigen. Hier sehen wir uns einige CSS3-Stile an, um farbenfrohen Fortschrittsbalken zu erstellen Beispielfreigabe:
1. Erstellen Sie einen statischen lila Streifen-Fortschrittsbalken
HTML-Code:
<body> <p class="progress-bar purple"> <span style="width:40%;"></span> </p> </body>
CSS-Code:
body {
background-color:#333;
}
.progress-bar {
background-color:#222;
border-radius:3px;
width:300px;
height:24px;
padding:5px;
margin:50px;
border-bottom:1px solid #444;
box-shadow:inset 0 0 2px 0 #000;
}
.progress-bar span {
display:inline-block;
width:140px;
height:24px;
border-radius:2px;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;
}
.purple span{
background-color:#F09;
background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));
background-size:16px 16px;
}
Der Endeffekt ist wie folgt: 
2. Erstellen Sie einen statischen blauen Fortschrittsbalken
HTML-Code:
<p class="progress-bar orange"> <span style="width:60%;"></span> </p>
CSS-Code:
.orange span{
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));
background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);
}
Der Endeffekt ist wie folgt: 
3. Erstellen Sie einen statischen grünen Fortschrittsbalken
HTML-Code:
<p> <span style="width:80%;"></span> </p>
CSS-Code:
.green span{
background-color:#00ff24;
box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;
-webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
-moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
}
Der endgültige Effekt ist wie folgt: 
4. Fügen Sie dynamische Effekte zu den violetten Streifen hinzu
CSS-Code:
.purple span:hover{
-webkit-animation:animate-stripes 3s linear infinite;
-moz-animation:3s linear 0s normal none infinite animate-stripes;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
Wenn die Maus darauf platziert wird, erscheinen dynamische Effekte.
Das obige ist der detaillierte Inhalt vonTeilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Variable Schriftarten Link -Dump!Apr 16, 2025 am 10:22 AMEs gab eine Menge großartiger Dinge, die in letzter Zeit um variable Schriftarten herumfliegen (unser Tag hat auch viele Sachen). Ich dachte, ich rundete alle neuen Sachen zusammen, die ich versammelt habe
Link unterstreicht, die in Blockhintergründe animierenApr 16, 2025 am 10:14 AMEs ist ein cooler kleiner Effekt. Der Standard -Linkstil hat eine Unterstreich
Vorladungsseiten kurz bevor sie benötigt werdenApr 16, 2025 am 09:53 AMDie typische Reise für eine Person, die auf einer Website stöbert: Anzeigen einer Seite, klicken Sie auf einen Link, Browser lädt neue Seite. Das nimmt kein lustiges Geschäft wie eine einzelne Seite an
Adaptives Foto -Layout mit FlexboxApr 16, 2025 am 09:51 AMSchauen wir uns einen superleichten Weg an, um einen horizontalen Mauerwerkseffekt für eine Reihe willkürlich großer Fotos zu erstellen. Werfen Sie alle Fotos darauf und
Die vielen Möglichkeiten, Formen und Bilder mit HTML und CSS zu verknüpfenApr 16, 2025 am 09:45 AMVerschiedene Website -Designs erfordern häufig eine andere Form als ein Quadrat oder ein Rechteck, um auf ein Klickereignis zu reagieren. Vielleicht hat Ihre Website eine Art geneigter oder
Webentwickler -SuchgeschichteApr 16, 2025 am 09:41 AMSophie Koonin blogge "alles, was ich in einer Woche als professioneller Software -Ingenieur gegoogelt habe, was ein faszinierender Blick auf den Geist eines Webentwicklers war und war
Ein Ausschnitt, um alle SVGs in einem Sprite zu sehenApr 16, 2025 am 09:31 AMIch denke an einen SVG -Sprite wie folgt:
Was passiert, wenn Sie zum ersten Mal eine neue Installation von Browsern öffnen?Apr 16, 2025 am 09:29 AMInteressante Forschungen von Jonathan Sampson, wo er beobachtet, wie das Netzwerk einen Browser anfordert
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Dreamweaver Mac
Visuelle Webentwicklungstools
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
