Cet effet semblable à un trait apparaîtra lorsque la souris le survolera. Peut-il être obtenu avec du CSS pur ? Comment obtenir le même effet ?
Au début, je voulais essayer d'utiliser des pseudo-classes pour l'implémenter, mais z-index semblait incapable de le gérer, alors je l'ai simulé comme ça. démo
<style type="text/css"> .btn{ position: relative; height: 45px; width: 200px; background: #fff; color: #6cf; text-align: center; line-height: 45px; -webkit-box-sizing:border-box; box-sizing:border-box; margin: 0 auto; border: 1px solid #ccc; } .b-l{ position: absolute; content: ""; display: block; width: 0px; height: 1px; left: -1px; top: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s; transition:width 1s linear 2s,height 0.5s linear 1.5s; } .b-r{ position: absolute; content: ""; display: block; width: 0px; height: 1px; right: -1px; bottom: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 0.5s,height 0.5s linear; transition:width 1s linear 0.5s,height 0.5s linear; } .btn:hover .b-l{ -webkit-transition:width 1s linear,height 0.5s linear 1s; transition:width 1s linear,height 0.5s linear 1s; width: 201px; height: 46px; } .btn:hover .b-r{ -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s; transition:width 1s linear 1.5s,height 0.5s linear 2.5s; width: 201px; height: 46px; } </style> <body> <p class="btn"> <p class="b-l"></p> <p class="b-r"></p> btn </p> </body>
Il peut être réalisé principalement en s'appuyant sur l'attribut animation-delay, vous pouvez le rechercher vous-même
C’est SVG.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Au début, je voulais essayer d'utiliser des pseudo-classes pour l'implémenter, mais z-index semblait incapable de le gérer, alors je l'ai simulé comme ça.
démo
Il peut être réalisé principalement en s'appuyant sur l'attribut animation-delay, vous pouvez le rechercher vous-même
C’est SVG.