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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
python测试驱动开发实例
2014/10/08 Python
用Python实现一个简单的线程池
2015/04/07 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python文件名和文件路径操作实例
2017/09/29 Python
python随机取list中的元素方法
2018/04/08 Python
python实现网页自动签到功能
2019/01/21 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
医院实习介绍信
2014/01/12 职场文书
应届护士求职信范文
2014/01/26 职场文书
求职自荐信怎么写
2014/03/06 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
Java版 单机五子棋
2022/05/04 Java/Android