怎么用CSS3实现逐渐发光的方格边框

发布时间:2022-03-02 15:33:23 作者:iii
来源:亿速云 阅读:420

今天小编给大家分享一下怎么用CSS3实现逐渐发光的方格边框的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一个使用伪元素来实现边框逐渐发光的代码,主要用到scaleopacity这两个属性。

Html代码

<div class="light">

         <img src="https://cache.yisu.com/upload/information/20220117/488/54962.jpg"/>

         <div class="light-inner">

                   <p>CSS3 逐渐发光的方格边框</p>

                   <p>CSS3 逐渐发光的方格边框</p>

         </div>

</div>

Css代码

.light{

         background: #fff;

         width: 180px;

         height: 180px;

         margin: 100px auto;

         position: relative;

         text-align: center;

         color: #333;

         transform:translate3d(0,0,0);

 

}

.light-inner{

         padding: 60px 30px 0;

         pointer-events: none;

         position: absolute;

         left: 0;

         top: 0;

         bottom: 0;

         right: 0;

         text-align: center;

         transition: background 0.35s;

         backface-visibility: hidden;

}

.light-inner:before, .light-inner:after{

         display: block;

         content: "";

         position: absolute;

         left: 30px;

         top: 30px;

         right: 30px;

         bottom: 30px;

         border: 1px solid #fff;

         opacity: 0;

         transition: opacity 0.35s, transform 0.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, transform 0.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;

}

以上就是“怎么用CSS3实现逐渐发光的方格边框”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. 怎么用CSS3制作环形星星发光动画
  2. CSS3怎么样实现边框

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:css3怎么设置图片封面展示动画

下一篇:CSS3怎么实现彩色进度条动画特效

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》