Beispiel für Sterne für den CSS-Bewertungseffekt

Was? Welcher Sternenmantel? Schauen wir uns zur Verdeutlichung das Bild an:

Wer genau hinsieht, erkennt ein Muster: Die Anzahl der hervorgehobenen Sterne lässt sich je nach Prozentsatz/Punktzahl dynamisch ändern.

Schritt-für-Schritt-Diagramm:

Dieser Effekt kann durch das Hinzufügen mehrerer Strukturen erzielt werden, wenn Sie auf eine Situation stoßen, in der ein Stern einen Punkt wert ist, aber kein halber Stern vorhanden ist (oder wenn doch, fügen Sie einfach einen Klassennamen für einen halben Stern hinzu).

Da die Sterne aber auch einen Farbverlaufseffekt haben mussten, hätte ich beinahe mit dem Designer gesprochen (und ihn natürlich gebeten, den Effekt auf keinen Farbverlauf zu ändern).

Aber wenn wir das wirklich tun, wird es so aussehen, als wären wir zu unprofessionell. Wir können nicht einmal schöne Effekte erzielen, also welchen Sinn hat es, es Frontend zu nennen?

Setzen Sie sich und schauen Sie sich den Designentwurf an.

Wenn Sie es direkt so betrachten, kommen Ihnen vielleicht keine Ideen, aber Sie können auch anders darüber nachdenken:

Überlegen Sie zunächst, wie Sie folgenden Effekt erzielen können?

Wie wäre es damit? Hast du nach der Lektüre ein paar Ideen, wie du den Star-Effekt erzielen kannst? ! Ok, entlassen.

Haha, aber es macht nichts, wenn du es nicht hast. Du kannst dir zuerst die Implementierung dieses Fortschrittsbalkens ansehen. Dann habe ich nach Ideen von ihm gesucht (das ist meine Idee während der Entwicklung, sehr dumm und „pragmatisch“):

Der Aufbau ist wie folgt:

Die Struktur ist sehr einfach, der Hauptkerncode lautet wie folgt:

<div Klasse = "Grade-Fortschritt-bg">
    <div Klasse = "Grade-Star-Gradual">
        <span class="Fortschritt" style="width: 50%;"></span>
    </div>
</div>

Der entsprechende Effekt wird deutlicher, wenn wir uns das Strukturmodell direkt ansehen:

Wie in der Abbildung gezeigt,

Unter ihnen ist div.grade-star-gradual für die graue Hintergrundleiste verantwortlich.

span.progress ist für den farbigen Fortschrittsbalken zuständig

Div.grade-progress-bg ist dafür verantwortlich, die beiden zu umbrechen und sie mit dem 100 %-Text auf der rechten Seite auszurichten.

Die prozentuale Breite von span.progress wird verwendet, um den Prozentsatz der Daten zu simulieren, indem der Anteil des grauen Balkens eingenommen wird. Es scheint außerordentlich einfach.

Implementierung farbiger Sterne :

Nach dieser Idee besteht der Unterschied zwischen einem farbigen Fortschrittsbalken und einem farbigen Stern-Fortschrittsbalken tatsächlich in den Sternen (auch das ist Unsinn).

Der entscheidende Punkt ist jedoch, die Sterne nicht als Fortschrittsbalken zu betrachten .

Mit anderen Worten wird die Sternebewertung auf die gleiche Weise implementiert wie der allgemeine Fortschrittsbalkeneffekt. Der einzige Unterschied ist die Anwesenheit oder Abwesenheit von Sternen.

Wie fügt man also einem normalen Fortschrittsbalken Sterne hinzu? Mein Design-Hauptfach hat mir dennoch einige Inspirationen gegeben:

Solange Sie den bunten Fortschrittsbalken mit einem ausgehöhlten Sternenmuster abdecken, würden Sie dann nicht nur Sterne sehen? !

Zum Beispiel:

Der eigentliche Fortschrittsbalken sieht dann folgendermaßen aus:

Nach dem Anziehen des wunderschönen Mantels sieht er so aus:

Haben Sie nicht das Gefühl, wieder einmal ein tolles Geschäft gemacht zu haben?

Der Codeaufbau ist der gleiche wie beim vorherigen Fortschrittsbalken. Die Hintergrundfarbe ist zunächst grau, oben sind fünf kleine graue Sterne zu sehen.

Wenn dann lohnende Daten vorliegen, kann durch Ändern der Breite des Farbbalkens span.progress in einen Prozentsatz eine visuelle Änderung der Anzahl der Sterne erreicht werden

Strukturell stimmt es mit dem Fortschrittsbalken überein, aber um der „Außenhülle“ dieses hohlen Sterns willen habe ich eine leere Struktur als jüngeren Bruder von span hinzugefügt. Sie können auch eine Pseudoklasse verwenden, um nach Belieben damit zu spielen.

<div Klasse = "Grade-Fortschrittsbox">
    <div Klasse="Grade-Star-bg">
      <div Klasse = "Grade-Star-Gradual">
        <span class="Fortschritt" style="width: 100%;"></span>
        <div class="grade-star-img bgsize"></div>//Bild eines hohlen Sterns</div>
   </div>
    <div class="grade-number grade-number1">5 Punkte</div>
</div>

Dabei ist aber darauf zu achten, dass die „Oberbekleidung angemessen getragen wird“, also gut geschnitten und nicht zu freizügig ist.

Die Farbe um die hohlen Sterne sollte mit der Farbe um den Fortschrittsbalken verschmelzen. Ich habe hier Weiß verwendet, damit es sich leichter vermischen lässt.

Schließlich können die zur Anzeige verwendeten Prozent- und Punktwerte einfach mit der Syntax von Vue gebunden und angezeigt werden.

Für den dynamischen Fülleffekt von links nach rechts müssen Sie einfach den CSS-Übergang verwenden und auf die Breitenänderung achten.

Normaler Fortschrittsbalken

.Grade-Fortschrittsbox

  .Grade-Fortschritt-bg

    .grade-star-gradual #[span.progress(:style="{width: (Zahl(DBData.Inv)*100>100?100:Zahl(DBData.Inv)*100).toFixed(0) + '%'}")]

  .Klassennummer {{(Nummer(DBData.Inv)*100>100?100:Nummer(DBData.Inv)*100).toFixed(2)}}%

Stil

Notenfortschrittsbox:nach {

    Inhalt: "";

    Anzeige: Block;

    klar: beides;

    Sichtbarkeit: versteckt;

    Überlauf: versteckt;

  } 

  .Grade-Fortschritt-bg {

    Anzeige: Tabellenzelle;

    vertikale Ausrichtung: Mitte;

    Breite: 4,3rem;

    Höhe: .14rem;

    Überlauf: versteckt;

  }

  .grade-star-gradual {

    Höhe: 0,16rem;

    -WebKit-Randradius: .15rem;

    Randradius: .15rem;

    Überlauf: versteckt;

    Hintergrund: #e5e5e5;

  }

  .grade-star-gradual span.progress {

    Breite: 0;

    Höhe: 100%;

    Anzeige: Block;

    -WebKit-Randradius: .15rem;

    Randradius: .15rem;

    -webkit-transition: Breite 1 s, Easy-Out;

    -o-Übergang: Breite 1 s, Ausstieg möglich;

    Übergang: Breite 1 s, Ausstieg;

    Hintergrund: -webkit-gradient(linear, links oben, rechts oben, von(#f23f5c), bis(#fea94e));

    Hintergrund: -o-linear-gradient(links, #f23f5c, #fea94e 100%);

    Hintergrund: linearer Farbverlauf (nach rechts, #f23f5c, #fea94e 100 %);

    Hintergrund: -webkit-linear-gradient(links, #f23f5c, #fea94e 100%);

  }

Stern-Fortschrittsbalken

.Grade-Fortschrittsbox

  .grade-star-bg

    .grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")]

      .grade-star-img

  .grade-number.grade-number1 {{DBData.Sat}} Punkte

Stil

.grade-star-bg {

    Position: relativ;

    Anzeige: Tabellenzelle;

    Breite: 4,46rem;

    Höhe: .5rem;

    Überlauf: versteckt;

    Rand rechts: .22rem;

    vertikale Ausrichtung: Mitte;

  }

  .grade-star-gradual {

    Höhe: 0,16rem;

    -WebKit-Randradius: .15rem;

    Randradius: .15rem;

    Überlauf: versteckt;

    Hintergrund: #e5e5e5;

  }

  .grade-star-bg .grade-star-gradual {

    Höhe: 100%;

  }

  .grade-star-img {

    Position: absolut;

    oben: 0;

    links: 0;

    Breite: 100 %;

    Höhe: 100%;

    Hintergrund: URL (Daten: Bild/png; Base64,) keine Wiederholung;

    -webkit-background-size: 100 % 100 % !wichtig;

    Hintergrundgröße: 100 % 100 % !wichtig;

  }

Okay, noch eines fertig.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.