Beispielanalyse, wie man CSS3 anstelle von JS verwendet, um eine Interaktion zu erreichen

[CSS3 und JS]

Studenten, die CSS kennen, wissen alle, dass die Implementierung von CSS die niedrigste Ebene ist und hinsichtlich der Implementierungsmethode und Leistung nicht vergleichbar ist. JS-Skripte, die Schnittstellen bereitstellen ; von Der Vergleich zwischen CSS3-Animation und JS-Animation wird es klarer machen; und mit der Verwendung von Front-End-Frameworks werden Seitenanimationen zunehmend CSS3 verwenden

[Andere Verwendungen von CSS3]

In Neben dem Ersetzen von Animationen spiegelt auch die Implementierung verschiedener Interaktionen die Leistungsfähigkeit von CSS wider, und es werden mehr der von CSS3 bereitgestellten Selektoren verwendet.

Schauen wir uns zunächst ein Beispiel an: Ja, es spiegelt mein tiefes Verständnis besser wider von CSS dieses Mal

<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>
<div class="list__con">
    <div class="box">
        <div class="delete"></div>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </div>
</div>

[Erklärung]

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

I Ich glaube, dass viele Menschen die oben genannte Implementierungsmethode bereits implementiert haben. Ich spreche hier hauptsächlich über mein Verständnis dieser Zeit und meine Vision für die Technologie. In diesen Jahren kenne ich mein eigenes Wachstumstempo. Aber das Gleiche ist, dass ich eine Menge Wissen zu nutzen weiß und weiß, wie man es nutzt, aber dieses Mal verstehe ich wirklich, was es bedeutet, nur seine Bedeutung zu kennen, aber nicht seine wahre Bedeutung zu kennen, 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 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 verschiedene leistungsstarke Selektoren verwenden, die von CSS3 hinzugefügt wurden, um mehr und bessere interaktive Effekte zu erzielen und so die Tragödie der Verwendung von JS zu überwinden Um das DOM zu ändern, tendiere ich eher zu CSS

Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie man CSS3 anstelle von JS verwendet, um eine Interaktion zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!