So verwenden Sie CSS3 anstelle von JS, um ein interaktives Tutorial zu erstellen

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 immer klarer, und mit der Verwendung von Front-End-Frameworks wird es immer mehr geben Seitenanimationen Anwendung CSS3. Spezifische Beispielcodes finden Sie in diesem Artikel

[CSS3 und JS]

Studenten, die CSS kennen, wissen alle, dass die Implementierung von CSS nicht die unterste Ebene ist Was die Leistung angeht, sind Skripte wie JS, die Schnittstellen bereitstellen, vergleichbar. Aus der Perspektive des Vergleichs von CSS3-Animationen und JS-Animationen wird es klarer sein, und mit der Verwendung von Front-End-Frameworks wird es mehr und mehr geben Weitere Seitenanimationen CSS3 anwenden

[Andere Verwendungsmöglichkeiten von CSS3]

Neben dem Ersetzen von Animationen gibt es auch die Realisierung verschiedener Interaktionen, die auch die widerspiegeln Leistungsfähigkeit von CSS und mehr. Die meisten von ihnen verwenden den von CSS3 bereitgestellten Selektor.

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-Interaktion und überprüfte Interaktion; Aus diesem Grund glaube ich, dass viele Menschen diese Methode bereits erreicht haben. Ich werde hier hauptsächlich über mein Verständnis dieser Zeit und meine Vision für Technologie sprechen. Ich weiß, wie schnell ich in diesen Jahren gearbeitet habe sind gewachsen, aber das Wichtigste ist, dass ich viel Wissen nutzen kann 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 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 Die ursprüngliche Idee wurde bisher wirklich umgesetzt.

Die Vorteile der Verwendung von CSS verbessern die Wiederverwendbarkeit und Wartbarkeit, bieten eine bessere Möglichkeit zur Implementierung der entsprechenden Komponenten 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 Ändern Sie die Tragödie von DOM, neigen Sie eher zu CSS

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