徐々に光る四角枠のCSS3実装例

この記事では、主にスケールと不透明度の2つの属性を使用して、境界線の緩やかな光りを実現する疑似要素を使用するコードを紹介します。詳細な紹介を見てみましょう:

HTML コード:

CSSコード:

コードは次のとおりです
= light t0.jpg" /> フロントエンド開発ブログ フロントをフォロー-開発終了

コードは次のとおりです .light{背景:#fff;実装手順:主に .light-inner を介して輝く四角形 疑似要素:前と:afterを使用して実現します

幅:180px; 高さ:180px; マージン:100pxauto; 位置:相対; テキスト整列:センター; #333; 変換:translate3d(0,0,0); } .light-inner{ パディング:60px30px0; ポインターイベント:なし; 位置:絶対; 左:0; 上:0; 下:0; 右:0; text-align:center; トランジション:background0.35s; backface-visibility:hidden; } .light-inner:before, .light-inner:after{ display:block; content:""; 位置:絶対; 左:30px; 上:30px; 右: 30px; bottom:30px; border:1pxsolid#fff; 不透明度:0; トランジション:不透明度0.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{ 不透明度: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; }

scaleX(0)からscaleX(1)まで、上下の境界線を中央から両側に徐々に拡張します

左右の境界線を中央から上下に拡張します側面:scaleY(0)からscaleY(1)

は、中央から隅に向かって徐々に光る正方形を形成します:opacity:0からopacity:1。

他にスキルはありません。

スケールの紹介

scale(

scale エフェクト例を詳しく解説

CSSで半透明の枠線を設定するには？

以上が徐々に光る四角枠のCSS3実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。