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;
评论10