讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > css教程 > 正文

CSS3实现逐渐发光的方格边框实例

小云云
发布： 2017-12-13 10:53:28
原创
3209人浏览过

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

HTML代码：

 

 代码如下

="light">

立即学习“前端免费学习笔记（深入）”；

 @@##@@

 

  

前端开发博客

  

关注前端开发

 

 

CSS代码：

 

 代码如下

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

灵思AI
灵思AI

专业的智能写作辅助平台

灵思AI 202
查看详情 灵思AI

 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;

}

 

实现步骤：

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

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

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

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

其它就没什么技巧了。

scale介绍

scale(

scaleX(

scaleY(

相关推荐：

在CSS3中设置元素的边框、背景和大小的方法讲解

有关单元素利用css实现多重边框效果实例详解

css中如何设置半透明边框？

CSS3实现逐渐发光的方格边框实例

以上就是CSS3实现逐渐发光的方格边框实例的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css3 css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：纯css实现缩略图悬停效果实例教程 下一篇：浅谈DIV和TABLE共存
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS背景图片位置如何响应变化_background-position百分比或关键字 background-position的百分比和关键字值通过点对齐机制实现响应式定位，30%40%表示背景图内对应点与容器点对齐，关键字如center等同50%50%，配合background-size可确保不同设备下视觉焦点一致。
2025-12-23 12:07:11
853
CSS选择器能选择空元素吗_使用:empty伪类实现精准控制 :empty伪类可精准选中无内容元素，用于隐藏空容器或添加占位样式，需注意空格和换行会使其失效，现代浏览器均支持。
2025-12-23 12:02:02
419
cssabsolute定位适合哪些场景使用_适用于装饰性与悬浮元素 position:absolute适合脱离文档流且需精准定位的元素，如右上角标签、悬浮按钮、覆盖层、提示气泡等，依赖相对定位父容器提供上下文，配合z-index和transform实现层级控制与动画优化。
2025-12-23 11:45:08
285
css图标旋转动画怎么写_利用animation和transform rotate CSS图标旋转动画需定义@keyframes旋转帧并用animation应用，注意元素display兼容性、避免overflow裁剪，支持方向控制、cubic-bezier节奏调节及hover暂停，图标与文字应分层以确保仅图标旋转。
2025-12-23 11:36:09
286
css边框圆角失效怎么办_确认overflow hidden或background设置不阻断border-radius 边框圆角失效最常见的原因是父容器overflow:hidden裁剪或background未设background-clip:padding-box导致遮挡；需优先排查这两项，再检查边框、transform和display等细节。
2025-12-23 11:23:02
378
cssicon需要心跳节奏动画怎么实现_结合scale与keyframes生成心跳动效 心跳动画核心是模拟收缩快（0.2s）、舒张慢（0.4–0.5s）且带过冲回落的节奏，需用自定义cubic-bezier缓动与非对称关键帧比例实现，而非简单对称缩放。
2025-12-23 11:05:44
639
css sticky滚动吸顶距离不准怎么办_结合scroll-margin-top或准确设置top值 sticky吸顶不准本质是浏览器计算top基准点时未考虑内边距、滚动条偏移或父级定位干扰；推荐用scroll-margin-top精准控制吸顶留白，兼容性好且语义清晰。
2025-12-23 10:54:32
558
css定位元素动画卡顿怎么办_避免频繁改变top改用transform 改用transform能提升动画性能，因其不触发布局计算，由GPU加速且可提升为独立合成层；应将top/left替换为translateY/translate，避免读写交替，并配合will-change或translateZ(0)主动提示分层。
2025-12-23 10:44:03
775
css如何给链接加访问提示_组合hover与visited 应按LVHA顺序使用:hover和:visited伪类，仅用color等安全属性区分状态，:visited:hover可微调已访问链接悬停效果，禁用transform、box-shadow等非安全属性。
2025-12-23 10:44:02
852
css边框颜色过深不协调怎么办_使用rgba降低透明度调整边框视觉权重 使用rgba()调节边框透明度可柔化视觉重量、保持色彩倾向，0.3–0.4为多数组件推荐值，需结合背景明暗与设备分辨率微调以提升协调性。
2025-12-23 10:41:02
657
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部