CSS3实现发光边框特效的方法

这篇文章主要介绍了CSS3实现发光边框特效的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

运行效果：

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);  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 = 9for(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实现发光边框特效的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!