边框发光样式css3,用CSS3实现发光方格边框
这次给大家带来用CSS3实现发光方格边框,用CSS3实现发光方格边框的注意事项有哪些,下面就是实战案例,一起来看一下。
本文介绍的是一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍:
效果图如下:
HTML代码:
前端开发博客
关注前端开发
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([, ]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX():指定对象X轴的(水平方向)缩放
scaleY():指定对象Y轴的(垂直方向)缩放
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
边框发光样式css3,用CSS3实现发光方格边框相关推荐
- 【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式 字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体 字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
- CSS给元素添加边框(样式、颜色、宽度)
给元素添加边框 CSS边框属性允许你指定一个元素边框的样式和颜色, 和边框宽度. 可以使用 border 属性将边框样式,颜色,和宽度 一起设置. 如果不设置其中的某个值,也不会出问题,比如 bord ...
- CSS3 实现圆圈动态发光特效动画的制作
CSS3实现圆圈动态发光特效动画 1.首先建设div大盒子,然后在里面建设小盒子,建设三个小div盒子,代表三个圈圈的标签 2.在样式中建设style样式,并与html的div盒子标签层层对应 代码入 ...
- php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
- html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
- CSS3设置Div左右两边或者上下边框的样式
关于CSS3设置Div左右两边或者上下边框的样式 目前可以通过如下方法,实现div只显示某些边框. 1.border: 1px dashed lightgray; border-top: none; ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- CSS3中背景与边框相关样式
1 与背景相关的新增属性 background-clip:指定背景的显示范围. background-origin:指定绘制背景图像时的起点. background-size:指定背景中图像的尺寸. ...
- html 萤火虫特效,html5+CSS3杯子里萤火虫发光动画特效
html5+CSS3杯子里萤火虫发光动画特效 js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:" ...
最新文章
- C Primer Plus 第10章 数组和指针 10.5 指针操作
- 洛谷P3960 列队(动态开节点线段树)
- 【量化投资】策略三(聚宽)
- Python之方法调用
- 2020 我的C++学习之路 C++PrimerPlus第八章课后习题
- centos 6.5 安装 redis
- 基于vue的无缝滚动组件
- 报 java.lang.ExceptionInInitializerError 的常见解决方法
- webbench接口并发测试
- 贺利坚老师汇编课程73笔记:键盘输入的处理过程
- JS实现单源点最短路径、动态规划分段图算法
- eclipse查看ftl文件
- VS 下环境覆盖率测试
- AD20/Altium designer——如何从立创EDA获取元器件封装库原理图库PCB库
- react中配置less-loader报错
- 逍遥模拟器拷贝android根目录文件,逍遥安卓模拟器怎样将已安装的镜像文件转移到别的磁盘上...
- 搜索引擎突然无法访问问题
- 进制转换器java程序_Java实现复杂的进制转换器功能示例
- 我的世界神级种子Java_盘点我的世界中单机生存必备的神级种子
- 读书笔记:深入理解PHP高级技巧、面向对象、核心技术 二 (19.1.21-19.2.10)