So verwenden Sie CSS3 anstelle von JS, um interaktive Effekte zu erzielen

Dieses Mal zeige ich Ihnen, wie Sie CSS3 anstelle von JS verwenden, um interaktive Effekte zu erzielen, und welche Vorsichtsmaßnahmen für die Verwendung von CSS3 anstelle von JS gelten, um interaktive Effekte zu erzielen ein Blick.

[CSS3 und JS]

Studenten, die CSS kennen, wissen alle, dass die Implementierung von CSS die niedrigste 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*/
.listcon{}
.listcon .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.listcon .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.listcon .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.listcon .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;}
.listcon .input:checked::after{content:'';width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.listcon label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.listcon .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.listcon .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.listcon .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete::after{content:'';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;}
.listcon .delete::before{content:'';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="listcon">
    <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 und überprüfte Interaktionen.

Ich glaube, dass viele Leute die oben genannte Implementierungsmethode bereits implementiert haben. Wir sprechen hier hauptsächlich darüber. Ich arbeite jetzt seit fast vier Jahren Über mein Verständnis dieser Zeit und meine Sehnsucht nach Technologie. Ich weiß, wie schnell ich gewachsen bin, aber das Gleiche ist, dass ich viel Wissen gebrauchen kann und es dieses Mal nur dann nutzen kann Ich verstehe wirklich, was es bedeutet, nur die Bedeutung zu kennen, aber nicht die wahre Bedeutung zu kennen, und warum!

Der oben genannte interaktive Effekt wurde zuvor durch die Kombination von CSS und JS erreicht. Während dieser Zeit habe ich auch versucht, CSS zu verwenden, um den interaktiven Effekt zu erzielen, aber das war nicht der Fall Bisher wirklich realisiert.

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

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. Wir werden die Tragödie der Verwendung von JS zum Ändern des DOM hinter uns lassen und uns eher für CSS entscheiden

.listcon .input:checked+label

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So passen Sie Textauslassungen in CSS an

So machen Sie die absolute Positionierung von CSS mit allen Auflösungen kompatibel

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3 anstelle von JS, um interaktive Effekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!