Implémentation CSS3 d'un exemple de bordure carrée qui brille progressivement

Cet article présente principalement un code qui utilise des pseudo-éléments pour réaliser l'éclat progressif de la bordure, en utilisant principalement les deux attributs d'échelle et d'opacité. Jetons un coup d'œil à l'introduction détaillée :

Code HTML :

Le code est le suivant

td>

代码如下
="light">        前端开发博客    关注前端开发

="light">

代码如下

.light{  background:#fff;  width:180px;  height:180px;  margin:100pxauto;  position:relative;  text-align:center;  color:#333;  transform:translate3d(0,0,0);   } .light-inner{  padding:60px30px0;  pointer-events:none;  position:absolute;  left:0;  top:0;  bottom:0;  right:0;  text-align:center;  transition: background0.35s;  backface-visibility:hidden; } .light-inner:before, .light-inner:after{  display:block;  content:"";  position:absolute;  left:30px;  top:30px;  right:30px;  bottom:30px;  border:1pxsolid#fff;  opacity:0;  transition: opacity0.35s, transform0.35s; } .light-inner:before{  border-left:0;  border-right:0;  transform:scaleX(0,1); } .light-inner:after{  border-top:0;  border-bottom:0;  transform: scaleY(1,0); } .light:hover .light-inner{  background:#458fd2 } .light:hover .light-inner:before, .light:hover .light-inner:after{  opacity:1;  transform: scale3d(1,1,1); }   .light-inner p{  transition: opacity .35s, transform0.35s;  transform: translate3d(0,20px,0);  color:#fff;  opacity:0;  line-height:30px; } .light:hover .light-inner p{  transform: translate3d(0,0,0);  opacity:1; }

Blog de développement front-end

Suivez le front- fin du développement< ;/p>

Code CSS :

Le code est le suivant

.light{ background:#fff; largeur:180px; hauteur:180px; marge:100pxauto; position: relative; alignement du texte : centre; couleur:#333; transform:translate3d(0,0,0); } . light-inner{ padding:60px30px0; pointer-events:aucun; position:absolute; left:0; haut:0; bas:0; droite:0; text-align:center; transition: background0.35s; backface-visibility:hidden;}.light-inner:avant, .light-inner:after{ display:block; contenu :""; position:absolue; gauche:30px; haut:30px; droite:30px; bas:30px; bordure:1pxsolid#fff; opacité:0; transition: opacité0,35s, transformation0,35s;}.light-inner:avant{ border-left:0; border-right:0; transformation : scaleX(0,1);}.light-inner:after{ border-top:0; border-bottom:0 ; transformation : scaleY(1,0);}.light:hover .light-inner{ background:#458fd2}.light:hover .light-inner:avant, .light:hover .light-inner:après{ opacité:1; transformation : scale3d(1,1,1);} .light-inner p{ transition : opacité 0,35 s, transformation 0,35 s ; transformation : traduire3d(0,20px,0); couleur:#fff; opacité:0; hauteur de ligne:30px ;}.light:hover .light-inner p{ transform: translate3d(0,0,0); opacité:1 ;}

Étapes de mise en œuvre : Carrés lumineux, C'est principalement réalisé à travers les pseudo éléments de .light-inner : before et :after Les bordures supérieure et inférieure de sont progressivement étendues du milieu vers les deux côtés : scaleX(0) à scaleX(1) gauche et droite La bordure s'étend du milieu vers les côtés supérieur et inférieur : scaleY(0) à scaleY(1), formant un carré qui brille progressivement du milieu vers les coins : opacité :0 à opacité:1. Il n'y a pas d'autres compétences. introduction à l'échellescale(scaleX(scaleY(Recommandations associées : Explication sur la façon de définir la bordure, l'arrière-plan et la taille des éléments en CSS3Explication détaillée d'exemples d'utilisation de CSS pour obtenir plusieurs effets de bordure sur un seul élémentcss Comment définir une bordure translucide dans

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!