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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python 绘制可视化折线图
2020/07/22 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
房屋公证委托书
2014/04/03 职场文书
婚前协议书怎么写
2014/04/15 职场文书
物理学专业自荐信
2014/06/11 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2015年新农合工作总结
2015/03/30 职场文书
责任书范本大全
2015/05/11 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
小学校本教研总结
2015/08/13 职场文书