CSS3-Implementierung eines Beispiels für einen allmählich leuchtenden quadratischen Rand

In diesem Artikel wird hauptsächlich ein Code vorgestellt, der Pseudoelemente verwendet, um das allmähliche Leuchten des Randes zu realisieren, wobei hauptsächlich die beiden Attribute Skalierung und Deckkraft verwendet werden. Werfen wir einen Blick auf die ausführliche Einführung:

HTML-Code:

Der Code lautet wie folgt

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; }

Front-End-Entwicklungsblog

Folge vorne- Ende der Entwicklung< ;/p>

CSS-Code:

Der Code lautet wie folgt

.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; oben:0; unten:0; rechts:0; text-align:center; Übergang: Hintergrund0,35 s; backface-visibility:hidden;}.light-inner:before, .light-inner:after{ display:block;Inhalt:"";Position:absolut;links:30px;oben:30px;rechts:30px; unten:30px;rand:1pxsolid#fff;Deckkraft:0;Übergang: Deckkraft0,35s, Transformation0,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{ Übergang: Deckkraft .35s, transform0.35s ; transform: translator3d(0,20px,0); color:#fff; opacity:0; line-height:30px ;}.light:hover .light-inner p{ transform: translator3d(0,0,0); opacity:1 ;}

Implementierungsschritte: Leuchtende Quadrate, das ist es Wird hauptsächlich durch die Pseudoelemente von .light-inner: before und :after realisiert. Die oberen und unteren Ränder von werden schrittweise von der Mitte nach beiden Seiten erweitert: ScaleX(0) bis ScaleX(1) links und rechts Der Rand dehnt sich von der Mitte zur oberen und unteren Seite aus: ScaleY(0) bis ScaleY(1) und bildet ein Quadrat, das von der Mitte bis zu den Ecken allmählich leuchtet: Deckkraft :0 zu Deckkraft:1. Es gibt keine anderen Fähigkeiten. Einführung in die Skalascale(scaleX(scaleY(Verwandte Empfehlungen: Erläuterung zum Festlegen des Rahmens, des Hintergrunds und der Größe von Elementen in CSS3Detaillierte Erläuterung von Beispielen für die Verwendung von CSS, um mehrere Randeffekte auf einem einzelnen Element zu erzielencss So legen Sie einen durchscheinenden Rand in fest

Das obige ist der detaillierte Inhalt vonCSS3-Implementierung eines Beispiels für einen allmählich leuchtenden quadratischen Rand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!