利用CSS3伪元素实现逐渐发光的方格边框


Posted in HTML / CSS onMay 07, 2017

本文介绍的是一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍:

效果图如下:

利用CSS3伪元素实现逐渐发光的方格边框

HTML代码:

<div class="light">
 <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
 <div class="light-inner">
  <p>前端开发博客</p>
  <p>关注前端开发</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;
}

实现步骤:

发光的方格,主要是通过.light-inner的伪元素:before和:after来实现

上下的边框是从中间往两边逐渐展开:scaleX(0)到scaleX(1)

左右的边框是从中间往上下两边展开:scaleY(0)到scaleY(1)

形成了一个四方形从中间向边角逐渐发光的效果:opacity:0到opacity:1。

其它就没什么技巧了。

scale介绍

scale(<number>[, <number>]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX(<number>):指定对象X轴的(水平方向)缩放

scaleY(<number>):指定对象Y轴的(垂直方向)缩放

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 #HTML / CSS
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
php curl模拟post请求小实例
2013/11/13 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python ldap实现登录实例代码
2016/09/30 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python程序控制NAO机器人行走
2019/04/29 Python
python调用webservice接口的实现
2019/07/12 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
单位领导证婚词
2014/01/14 职场文书
优秀教师工作感言
2014/02/16 职场文书
医德医风学习心得体会
2016/01/25 职场文书
投资入股协议书
2016/03/22 职场文书