react实现五彩的灯连线边框闪烁动画代码-html代码-BFW代码库

react实现五彩的灯连线边框闪烁动画代码

代码语言：html

代码描述：react实现五彩的灯连线边框闪烁动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
        --shadow-blur: 8px;
        --bulb-size: 20px;
        --socket-color: green;
        --socket-width: 8px;
        --socket-height: 12px;
        
        background: #111;
}

.light-group {
        position: fixed;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
}

.light-group.row {
        width: 100%;
        left: 0;
}

.light-group.col {
        flex-direction: column;
        height: 100%;
        top: 0;
}

.light-group.row.start {
        top: 0;
}

.light-group.row.end {
        bottom: 0;
}

.light-group.col.start {
        left: 0;
}

.light-group.col.end {
        right: 0;
}

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
}

.light-group.row .container {
  width: var(--spacing);
        padding: var(--socket-width) 0;
}

.light-group.col .container {
  height: var(--spacing);
        padding: 0 var(--socket-width);
}

.container:last-child .wire {
        display: none;
}

.wire {
        position: absolute;
        width: var(--spacing);
        height: var(--spacing);
}

.light-group.row.start .wire {
  transform: translateX(50%);
        bottom: 0;
}

.light-group.row.end .wire {
  transform: translateX(50%) scaleY(-1);
  top: 0;
}

.light-group.col.start .wire {
  transform: translateY(50%) rotate(-90deg);
  right: 0;
}

.light-group.col.end .wire {
  transform: translateY(50%) rotate(-90deg) scaleY(-1);
        left: 0;
}

.socket {
        position: absolute;
        z-index: 0;
        border-radius: 2px;
        background: var(--socket-color);
}

.light-group.row .socket {
        width: var(--socket-width);
        height: var(--socket-height);
}

.light-group.col .socket {
        width: var(--socket-height);
        height: var(--socket-width);
}

.light-group.row.end .socket {
        bottom: 0;
}

.light-group.row.start .socket {
        top: 0;
}

.light-group.col.start .socket {
        left: 0;
}

.light-group.col.end .socket {
        right: 0;
}

.bulb {
        z-index: 10;
        width: var(--bulb-size);
        height: var(--bulb-size);
        border-radius: 50%;
}

.container:nth-child(5n + 1) .bulb {
  box-shadow: 0 0 var(--shadow-blur) var(--color-1);
  background: var(--color-1);
  animation: animation-1 1s infinite alternate-reverse;
}

.container:nth-child(5n + 2) .bulb {
  box-shadow: 0 0 var(--shadow-blur) var(--color-2);
  background: var(--color-2);
  animation: animation-2 1s infinite alternate-reverse -1s;
}

.container:nth-child(5n + 3) .bulb {
  box-shadow: 0 0 var(--shadow-blur) var(--color-3);
  background: var(--color-3);
  animation: animation-3 1s infinite alternate-reverse -2s;
}

.container:nth-child(5n + 4) .bulb {
  box-shadow: 0 0 var(--shadow-blur) var(--color-4);
  background: var(--color-4);
  animation: .........完整代码请登录后点击上方下载按钮下载查看