Comment utiliser CSS3 au lieu de JS pour réaliser un didacticiel interactif

Cet article présente principalement l'utilisation de CSS3 au lieu de JS pour réaliser une interaction. Du point de vue de la comparaison de l'animation CSS3 et de l'animation JS, ce sera plus clair et avec l'utilisation de frameworks front-end, il y en aura de plus en plus ; animations de pages Application CSS3. Veuillez vous référer à cet article pour des exemples de codes spécifiques

[CSS3 et JS]

Les étudiants qui connaissent CSS savent tous que l'implémentation de CSS est le niveau le plus bas ni l'un ni l'autre. en termes de performances ni en termes de performances, les scripts comme JS qui fournissent des interfaces sont comparables ; du point de vue de la comparaison de l'animation CSS3 et de l'animation JS, ce sera plus clair et avec l'utilisation de frameworks front-end, il y en aura plus et ; plus d'animations de pages Appliquer CSS3

[Autres utilisations de CSS3]

En plus du remplacement des animations, il y a aussi la réalisation de diverses interactions, qui reflète également le la puissance du CSS, et plus encore La plupart d'entre eux utilisent le sélecteur fourni par CSS3

Regardons d'abord un exemple : il peut mieux refléter ma profonde compréhension du 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>
<p class="list__con">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[Explication]

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

Pour ce qui précède, je crois que beaucoup de gens ont déjà adopté cette méthode ; ici je parlerai principalement de ma compréhension de cette époque et de ma vision de la technologie. Je travaille depuis près de quatre ans maintenant, au cours de ces années, je sais à quelle vitesse je travaille. j'ai grandi, mais c'est pareil. Le plus important est que je puisse utiliser beaucoup de connaissances et savoir 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. L'idée originale ;

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

.list__con .input:checked+label

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é, nous laisserons désormais l'utilisation de JS ; changer La tragédie du DOM, plus enclin au CSS

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!