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