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

<style>
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;}
</style>
<p class="listcon">
    <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 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 ; >

.listcon .input:checked+label

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!