So erzielen Sie einen Fortschrittsbalkeneffekt in CSS3
Während des Projektprozesses begann ich, die requestAnimationFrame-Methode von js zu verwenden, um den Fortschrittsbalken zu implementieren. Bei vielen Daten wirkte sich dies jedoch stark auf die Leistung aus, sodass ich zu wechselte CSS, um es zu implementieren und zu optimieren.
Veröffentlichen Sie zuerst den Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}
.child{position: relative;height:100%;border-radius:inherit;}
.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
animation: process 1s linear forwards ;
}
@keyframes process
{
0%{
left:0;right:100%;
}
20%{
right:80%
}
40%{
right:60%;
}
60%{right:40%;}
80%{right:20%;}
100%{right:0;}
}
</style>
</head>
<body>
<p class="box">
<p class="child" style="width:50%"> // child的百分比就是进度条的占比效果
<p class="process-animate"></p>
</p>
</p>
</body>
</html>Rendering (kopieren Sie den Code, um den dynamischen Effekt zu sehen):
Unter normalen Umständen ist die Der Prozentsatz muss auf der Grundlage von Hintergrunddaten berechnet werden, sodass er dynamisch übergeben wird. Der Vue-Code wird unten veröffentlicht.
Fortschrittsbalken-Unterkomponente (progress.vue):
<template>
<p class="process-wrapper" :class="{'addGray':addGray}">
<p class="process-child" ref="processChild">
<p class="process-animate" :class="{'addGray':addGray}"></p>
</p>
</p>
</template>
<script>
export default {
props: {
addGray: {
//置灰
type: Boolean,
default: false
},
progressWidth: {
//进度条百分比
type: Number,
default: 0
}
},
mounted() {
this.$nextTick(() => {
console.log(this.addGray, "addGray---");
this.$refs.processChild.style.width = this.progressWidth + "%"; //动态改变进度条
// this.$refs.processChild.style.width = 90 + "%"; 测试效果
});
}
};
</script>
<style lang="scss" scoped>
.process-wrapper {
width: 1.98rem;
height: 0.13rem;
margin: 0.12rem 0 0.1rem 0;
border-radius: 0.1rem;
background: #fff;
border: 0.01rem solid #ff6780;
&.addGray {
background: #999;
border: 0.01rem solid #999;
}
.process-child {
position: relative;
height: 100%;
// width: 100%; //这个width就是动态变化。通过js改变
border-radius: inherit;
.process-animate {
background: #ff6780;
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: inherit;
animation: process 1s linear forwards;
&.addGray {
background: #999 !important;
// border: 0.01rem solid #999;
}
}
}
}
@keyframes process {
0% {
left: 0;
right: 100%;
}
20% {
right: 80%;
}
40% {
right: 60%;
}
60% {
right: 40%;
}
80% {
right: 20%;
}
100% {
right: 0;
}
}
</style>Übergeordnete Komponente Aufruf:
<!-- 进度条 --> <Progress :addGray="inactive" :progressWidth="progressWidth"></Progress>
Sehen Sie sich den tatsächlichen Effekt an:
Empfohlenes Tutorial: „CSS Tutorial“
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Fortschrittsbalkeneffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
Wie implementiert man die Fortschrittsbalkenfunktion beim Laden von Seiten in JavaScript?
Oct 27, 2023 am 08:57 AM
Wie implementiert JavaScript die Funktion zum Fortschrittsbalken beim Laden der Seite? In modernen Internetanwendungen ist die Seitenladegeschwindigkeit einer der Schlüsselfaktoren für das Benutzererlebnis. Um Benutzern den Ladevorgang anzuzeigen, verwenden viele Websites und Anwendungen Ladefortschrittsbalken. JavaScript bietet eine einfache und effektive Möglichkeit, die Fortschrittsbalkenfunktion beim Laden von Seiten zu implementieren. Der spezifische Implementierungsprozess ist wie folgt: Erstellen Sie zunächst eine HTML-Struktur eines Fortschrittsbalkens an einer geeigneten Stelle auf der Seite
Wie stelle ich die Farbe eines Fortschrittsbalkens mithilfe von HTML und CSS ein?
Sep 19, 2023 pm 08:25 PM
Bei der Website-Entwicklung sind Fortschrittsbalken ein wichtiger Bestandteil der Website. Der Fortschrittsbalken zeigt den Fortschritt des Prozesses an. Mithilfe dieser Funktion können Benutzer den Status der auf der Website ausgeführten Arbeiten anzeigen, einschließlich Ladezeiten, Datei-Uploads, Datei-Downloads und anderer ähnlicher Aufgaben. Standardmäßig ist es grau. Um die Fortschrittsbalken jedoch hervorzuheben und optisch ansprechend zu gestalten, können Sie ihre Farbe mithilfe von HTML und CSS ändern. Was ist ein Fortschrittsbalken? Ein Fortschrittsbalken zeigt den Fortschritt einer Aufgabe an. Es handelt sich um ein grafisches Benutzeroberflächenelement. Es besteht im Wesentlichen aus einem horizontalen Balken, der sich im Verlauf der Aufgabe allmählich füllt, begleitet von einem Prozentwert oder einem anderen Abschlussindikator. Fortschrittsbalken werden in Webanwendungen verwendet, um Benutzern Informationen über den Abschluss eines Prozesses wie Datei-Upload, Datei-Download oder Softwareinstallation bereitzustellen.
So implementieren Sie Fortschrittsbalkeneffekte mit Vue
Sep 19, 2023 am 09:22 AM
So verwenden Sie Vue zum Implementieren von Fortschrittsbalkeneffekten Der Fortschrittsbalken ist ein allgemeines Schnittstellenelement, das verwendet werden kann, um den Abschluss einer Aufgabe oder eines Vorgangs anzuzeigen. Im Vue-Framework können wir durch einfachen Code Spezialeffekte des Fortschrittsbalkens implementieren. In diesem Artikel wird erläutert, wie Sie mit Vue Fortschrittsbalkeneffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Erstellen Sie eine Vue-Komponente. Zuerst müssen wir eine Vue-Komponente erstellen, um die Fortschrittsbalkenfunktion zu implementieren. In Vue sind Komponenten wiederverwendbar und können an mehreren Stellen verwendet werden. Erstellen Sie eine Datei mit dem Namen Pro
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
