CSS3 ersetzt JS, um Interaktion zu erreichen

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 anstelle von JS vorgestellt, um die Interaktion zu erreichen. Aus der Perspektive des Vergleichs von CSS3-Animationen und JS-Animationen wird es klarer, und durch die Verwendung von Front-End-Frameworks wird die Seitenanimation häufiger verwendet und mehr CSS3. Bitte lesen Sie diesen Artikel für spezifischen Beispielcode. Ich hoffe, er kann Ihnen helfen.

[CSS3 und JS]

Studenten, die CSS kennen, wissen alle, dass die Implementierung von CSS die unterste Ebene ist, weder in Bezug auf die Implementierung noch auf die Leistung von JS Die bereitgestellten Schnittstellen sind vergleichbar; aus der Perspektive des Vergleichs von CSS3-Animationen und JS-Animationen wird es klarer und mit der Verwendung von Front-End-Frameworks werden immer mehr Seitenanimationen CSS3 verwenden

[ Weitere Einsatzmöglichkeiten von CSS3]

Neben dem Ersetzen von Animationen gibt es auch die Implementierung verschiedener Interaktionen, was ebenfalls die Leistungsfähigkeit von CSS widerspiegelt, und durch den Einsatz von CSS3 werden weitere Möglichkeiten geboten

Schauen wir uns zunächst ein Beispiel an: Diesmal kann es mein tiefes Verständnis von CSS besser widerspiegeln

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.list__con .input:checked::after{content:&#39;&#39;;width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:&#39;&#39;;position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.list__con .delete::before{content:&#39;&#39;;position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
</style>
<p class="list__con">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[Erklärung]

Das Obige umfasst viele Interaktionen, Hover-Interaktionen, überprüfte Interaktionen

Ich glaube, dass die oben genannte Implementierungsmethode bereits von vielen Menschen implementiert wurde Ich werde hauptsächlich über mein Verständnis dieser Zeit und meine Vision für Technologie sprechen. Ich arbeite jetzt seit fast vier Jahren. Ich weiß, wie schnell ich gewachsen bin, aber das Gleiche ist, dass ich viel Wissen gebrauchen kann . und ich weiß, wie man es benutzt; aber dieses Mal verstehe ich wirklich, was es bedeutet, nur seine Bedeutung zu kennen, aber nicht seine wahre Bedeutung und warum!

In der Vergangenheit habe ich eine Kombination aus CSS und JS verwendet, um den oben genannten interaktiven Effekt zu erzielen. In dieser Zeit habe ich auch versucht, CSS zu verwenden, um den interaktiven Effekt zu erzielen Während der Erkundung wurde die ursprüngliche Idee noch nicht wirklich umgesetzt.

Die Vorteile der Verwendung von CSS verbessern die Wiederverwendbarkeit und Wartbarkeit, bieten eine bessere Möglichkeit, die entsprechenden Komponenten zu implementieren und verbessern die Leistung;

.list__con .input:checked+label

Wie oben verwendet, können wir von nun an verschiedene leistungsstarke Selektoren verwenden, die von CSS3 hinzugefügt wurden, um mehr und bessere interaktive Effekte zu erzielen wird die Verwendung von JS ändern Die Tragödie von DOM neigt eher zu CSS

Verwandte Empfehlungen:

Ein Beispiel für die Interaktion zwischen PHP und JS mithilfe dynamischer Webtechnologie

Ajax-asynchrone Übertragung und PHP zur Realisierung der Interaktion

Basierend auf jQuery zur Realisierung interaktiven Social-Sharing-Codes mit Quellcode download_jquery

Das obige ist der detaillierte Inhalt vonCSS3 ersetzt JS, um Interaktion zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!