css矩形外发光,CSS3 实现发光边框特效

运行效果：

html

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 = `

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 发光边框特效的资料请关注萬仟网其它相关文章！