Exemple d'analyse de la façon d'utiliser CSS3 au lieu de JS pour réaliser une interaction

[CSS3 et JS]

Les étudiants qui connaissent CSS savent tous que l'implémentation de CSS est le niveau le plus bas, et qu'elle n'est pas comparable en termes de méthode d'implémentation et de performances des scripts JS qui fournissent des interfaces. ; de La comparaison entre l'animation CSS3 et l'animation JS le rendra plus clair ; et avec l'utilisation de frameworks front-end, les animations de pages utiliseront de plus en plus CSS3

[Autres utilisations de CSS3]

Dans en plus du remplacement des animations, la mise en œuvre de diverses interactions reflète également la puissance du CSS, et davantage de sélecteurs fournis par CSS3 sont utilisés

Regardons d'abord un exemple : Oui, cela reflète mieux ma profonde compréhension ; de CSS cette fois

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

[Explication]

Ce qui précède comprend de nombreuses interactions, des interactions de survol, une interaction vérifiée

I ; je crois que de nombreuses personnes ont déjà mis en œuvre la méthode de mise en œuvre ci-dessus ; je parle ici principalement de ma compréhension de cette époque et de ma vision de la technologie. Je travaille depuis près de quatre ans maintenant, je connais mon propre rythme de croissance. mais la même chose c'est que je sais utiliser beaucoup de connaissances et que je sais comment les utiliser ; mais cette fois je comprends vraiment ce que signifie connaître seulement leur sens mais pas leur vrai sens, et pourquoi !

L'effet interactif ci-dessus a été obtenu en combinant CSS et JS auparavant. Pendant cette période, j'ai également essayé d'utiliser CSS pour obtenir l'effet interactif. Cependant, j'étais coincé à ma manière lors de l'exploration et ce n'était pas le cas. vraiment réalisé jusqu'à présent. Idée originale ;

Les avantages de l'utilisation de CSS pour le réaliser pleinement améliorent la réutilisabilité et la maintenabilité, offrent une meilleure façon d'implémenter les composants correspondants et améliorent également les performances ; >

Comme utilisé ci-dessus, nous pouvons utiliser divers sélecteurs puissants ajoutés par CSS3 pour obtenir des effets interactifs plus nombreux et de meilleure qualité, laissant ainsi derrière nous la tragédie de l'utilisation de JS pour changer le DOM , plus enclin à CSS

.list__con .input:checked+label

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!