运行效果:
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 发光边框特效的资料请关注脚本之家其它相关文章!
简单写一下常见的基础图形,以及一些遇到的样式小图标 下图是css效果: 各个图形...
传统方法正方形用固定的形式写 直接长=宽写固定的值如下 .box{width: 200px;hei...
推荐电子书 去年因为疫情原因公司欠薪,被迫在4,5月开始找工作,顺手写了一本《...
浏览器缓存机制 前端缓存分为网络(HTTP)缓存和浏览器本地储存。 HTTP 缓存机制 ...
一个 IM 服务端项目,采用 Spring Reactor 作为基础技术研发,全站响应式技术应...
1.毕业那天,我以为我离开了地狱,其实我是离开了天堂。 2.悄悄进你空间,只有...
1.对你说晚安的人很多,可只有一个人说的晚安听起来最特别。 2.女人永远不会明...
命令简介 ldd 命令打印程序和库的共享库依赖项。注意:ldd 不是一个可执行程序,...
使用CSS也好久了,但一直都是在使用px来设置Web元素的相关属性,未敢使用em。主...
在开发移动端时,不像开发PC端那么方便,有控制台,可以查看各种网络请求,以及...