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

c9ccee2e6ea535a969eb3f532ad9fe89
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;}
531ac245ce3e4fe3d50054a55f265927
28859b2ba70e98e5703d7b62483afef7
    9890cd3db8af2c13be66110fccb4c149
        efa64630fb67b2f5e868af04ec249fd694b3e26ee717c64999d7867364b1b4a3
        4cd7a1c97800370822b14b86c8fd82a0
        2e1cf0710519d5598b1f0f14c36ba674啥地方垃圾费8c1ecd4bb896b2264e0711597d40766c
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

[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!