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: animation-4 1s infinite alternate-reverse -3s; } .container:nth-child(5n + 5) .bulb { box-shadow: 0 0 var(--shadow-blur) var(--color-5); background: var(--color-5); animation: animation-5 1s infinite alternate-reverse -4s; } @keyframes animation-1 { from { background: var(--color-1); box-shadow: 0 0 var(--shadow-blur) var(--color-1); } to { background: var(--color-1-fade); box-shadow: 0 0 var(--shadow-blur) var(--color-1-fade); } } @keyframes animation-2 { from { background: var(--color-2); box-shadow: 0 0 var(--shadow-blur) var(--color-2); } to { background: var(--color-2-fade); box-shadow: 0 0 var(--shadow-blur) var(--color-2-fade); } } @keyframes animation-3 { from { background: var(--color-3); box-shadow: 0 0 var(--shadow-blur) var(--color-3); } to { background: var(--color-3-fade); box-shadow: 0 0 var(--shadow-blur) var(--color-3-fade); } } @keyframes animation-4 { from { background: var(--color-4); box-shadow: 0 0 var(--shadow-blur) var(--color-4); } to { background: var(--color-4-fade); box-shadow: 0 0 var(--shadow-blur) var(--color-4-fade); } } @keyframes animation-5 { from { background: var(--color-5); box-shadow: 0 0 var(--shadow-blur) var(--color-5); } to { background: var(--color-5-fade); box-shadow.........完整代码请登录后点击上方下载按钮下载查看
网友评论0