Comment utiliser CSS3 au lieu de JS pour obtenir des effets interactifs

Cette fois, je vais vous montrer comment utiliser CSS3 au lieu de JS pour obtenir des effets interactifs, et quelles sont les précautions pour utiliser CSS3 au lieu de JS pour obtenir des effets interactifs. Voici des cas pratiques, prenons. un regard.

[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, de plus en plus d'animations de pages utiliseront 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

c9ccee2e6ea535a969eb3f532ad9fe89
body{background:#f4f4f4;margin:0;}
/*list*/
.listcon{}
.listcon .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.listcon .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.listcon .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.listcon .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;}
.listcon .input:checked::after{content:'';width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.listcon label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.listcon .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.listcon .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.listcon .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete::after{content:'';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;}
.listcon .delete::before{content:'';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;}
531ac245ce3e4fe3d50054a55f265927
28859b2ba70e98e5703d7b62483afef7
    9890cd3db8af2c13be66110fccb4c149
        efa64630fb67b2f5e868af04ec249fd694b3e26ee717c64999d7867364b1b4a3
        4cd7a1c97800370822b14b86c8fd82a0
        2e1cf0710519d5598b1f0f14c36ba674啥地方垃圾费8c1ecd4bb896b2264e0711597d40766c
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

[Explication 】

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

Je crois que de nombreuses personnes ont déjà mis en œuvre la méthode de mise en œuvre ci-dessus, ici nous en parlons principalement. Je travaille depuis près de quatre ans maintenant ; sur ma compréhension de cette époque et mon désir de technologie 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 savoir les utiliser, mais cette fois seulement, je le fais. Je comprends vraiment ce que signifie connaître seulement le sens sans connaître le 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é. À partir de maintenant, nous laisserons la tragédie de l'utilisation de JS pour changer le DOM et deviendrons plus enclins au CSS ; 🎜>

.listcon .input:checked+label

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment personnaliser l'omission de texte en CSS

Comment rendre le positionnement absolu de CSS compatible avec toutes les résolutions

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!