CSS3 实现发光边框特效


Posted in HTML / CSS onNovember 11, 2020

运行效果:

CSS3 实现发光边框特效

html

<!-- This element is not visible. The DOM is generated by JavaScript -->
<div class="root" style="display: none;">
  <div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side right"></div>
    <div class="side bottom"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #010326;
}

.root {
  --glow_width: 2px;
  --animation_length: 2s;
  --delay_factor: 2;

  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%) rotate(45deg);

/*  Uncomment the line below to see how this system is set up  */
/*   border: 1px dashed red; */
  overflow: hidden;
}

.side {
  position: absolute;
  top: 0;
  left: 0;
}

.side.left,
.side.right {
  width: var(--glow_width);
  height: 0;
  background: linear-gradient(to bottom, transparent, #c03225, transparent);
  animation: heightAnim var(--animation_length) linear infinite,
    hider calc(var(--delay_factor) * var(--animation_length))
      var(--animation_length) infinite;
}

.side.top,
.side.bottom {
  width: 100%;
  height: var(--glow_width);
  background: linear-gradient(to left, transparent, #c03225, transparent);
  animation: widthAnim var(--animation_length) 0s linear infinite,
    hider calc(var(--delay_factor) * var(--animation_length))
      var(--animation_length) infinite;
}

.side.right {
  left: auto;
  right: 0;
  height: 0;
  animation-delay: calc(var(--animation_length) / 2);
  animation-direction: normal, reverse;
}

.side.bottom {
  top: auto;
  bottom: 0;
  width: 0;
  animation-delay: calc(var(--animation_length) / 2);
  animation-direction: normal, reverse;
}

@keyframes heightAnim {
  0% {
    height: 0px;
  }
  50% {
    height: 300px;
    transform: initial;
  }
  100% {
    transform: translate(0, 300px);
  }
}

@keyframes widthAnim {
  0% {
    width: 0px;
  }
  50% {
    width: 300px;
    transform: initial;
  }
  100% {
    transform: translate(300px, 0px);
  }
}

@keyframes hider {
  0%,
  50% {
    opacity: 0;
  }
  51%,
  100% {
    opacity: 1;
  }
}

js

let template = `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})">
<div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side right"></div>
    <div class="side bottom"></div>
  </div>
</div>`

let segments = 9
for(let i = -segments; i < segments; i++){
  document.body.innerHTML += template.replace("{{ value }}", 90/segments * i + "deg")
}

// document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg")

以上就是CSS3 实现发光边框特效的详细内容,更多关于CSS3 发光边框特效的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 #HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
You might like
php常用字符串处理函数实例分析
2014/11/22 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
ASP.NET Core中的配置详解
2021/02/05 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
优秀教师获奖感言
2014/01/31 职场文书
具结保证书
2015/01/17 职场文书
求职信格式范文
2015/03/19 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
重阳节活动主持词
2015/07/04 职场文书
教师学习心得体会范文
2016/01/21 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang