- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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 ?
欧阳克2017-06-24 09:46:08
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>
代言2017-06-24 09:46:08
Il peut être réalisé principalement en s'appuyant sur l'attribut animation-delay, vous pouvez le rechercher vous-même