css+js实现彩色灯泡连线边框效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现彩色灯泡连线边框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> section { padding: 5rem 2rem; text-align: center; color: gray; font-family: system-ui; min-width: 50%; max-width: 600px; margin: 3rem 0; background: rgba(255,255,255,.025); position: relative; } section:has(img) { padding: 0; display: grid; place-items: center; } section:has(img)::after { content: 'Images need a container div'; position: absolute; padding: 1rem; background: rgba(0,0,0,.5); border-radius: 5px; color: lightgray; } code { padding: .2rem; background: #333; border-radius: 4px; } button { padding: 1rem 1rem; border: 0; color: dimgray; border-radius: 5px; } img { width: 100%; } h1 { font-size: 2rem; width: fit-content; margin: 0 auto; padding: 1rem 2rem; } /* resets and basic page styling*/ body { margin: 0; padding: 0; background: #222; min-height: 100vh; display: grid; place-items: center; } * { box-sizing: border-box; } </style> </head> <body > <section class='addLights'> Add lights to any element using the<br> <code>.addLights</code> class </section> <section> <button class='addLights'>Buttons</button> </section> <section class='addLights'> <img src='https://picsum.photos/1920/1080' /> </section> <section> <h1 class='addLights'>Headings work as well</h1> </section> <section class='addLights' style='border-radius: 1rem;'> Add rounded corners if you want.<br> Thank you for your time. </section> <script > setTimeout(function(){ var lights_count = 11, wire_color = '#040', glow_size = 3, twinkle = false, rotation_max = 35, target_elements = document.querySelectorAll('.addLights'), colors = ['Blue','red','gold','ForestGreen','DarkViolet','orangered', 'DarkTurquoise'], l_width = 100 / lights_count target_elements.forEach(function(elm) { var elm_loc = elm.getBoundingClientRect(), elm_h = Math.floor(elm_loc.height / (elm_loc.width / lights_count)) console.log(elm_h) // vertical lights for(var i=0;i<elm_h;i++) { var l = document.createElement('div') l.className = 'light_box' l.style.width = elm_loc.height / elm_h + 'px' l.style.height = elm_loc.width + 'px' l.style.position = 'absolute' l.style.left = 0 l.style.top = 100 / elm_h * i + '%' // l.style.borderTop = '2px solid '+wire_color // l.style.borderBottom = '2px solid '+.........完整代码请登录后点击上方下载按钮下载查看
网友评论0