CSS3 remplace JS pour réaliser l'interaction

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, l'animation de page sera davantage utilisée ; et plus de CSS3. Veuillez vous référer à cet article pour un exemple de code spécifique. J'espère qu'il pourra vous aider.

[CSS3 et JS]

Les étudiants qui connaissent CSS savent tous que l'implémentation de CSS est le niveau le plus bas, ni en termes d'implémentation ni de performances JS Les scripts. 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, les animations de pages utiliseront de plus en plus CSS3

[Autres utilisations ; de CSS3]

En plus du remplacement des animations, il y a aussi la mise en œuvre de diverses interactions, qui reflètent également la puissance du CSS, et plus d'options sont fournies grâce à l'utilisation de 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, une interaction vérifiée

Je crois que la méthode de mise en œuvre ci-dessus a déjà été mise en œuvre. Beaucoup de gens l'ont réalisé ici, je vais principalement le faire ; parler 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 j'ai grandi, mais la même chose est que je peux utiliser beaucoup de connaissances. et je sais comment l'utiliser ; mais cette fois, je comprends vraiment ce que signifie connaître seulement sa signification mais pas sa vraie signification, 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 ; changement La tragédie du DOM est plus encline au CSS

Recommandations associées :

Un exemple d'interaction entre PHP et JS utilisant la technologie Web dynamique

Transmission asynchrone Ajax et PHP pour réaliser l'interaction

Basé sur jQuery pour réaliser une expérience interactive code de partage social avec le code source download_jquery

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!