css+js实现发光悬浮灯光图标导航条代码
代码语言:html
所属分类:菜单导航
代码描述:css+js实现发光悬浮灯光图标导航条代码
代码标签: css js 发光 悬浮 灯光 图标 导航条 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1e2759; } ul { position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.25); } ul li { list-style: none; } ul li a { position: relative; color: #fff; text-decoration: none; display: inline-block; padding: 20px 30px; z-index: 1000; backdrop-filter: blur(15px); } ul li a ion-icon { font-size: 2.5em; pointer-events: none; opacity: 0.25; transition: 0.25s; } ul li.active a ion-icon { opacity: 1; } #marker { position: absolute; top: 0; transition: 0.5s; z-index: 1; } #marker::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 50px; height: 40px; border-radius: 8px; } ul li:nth-child(1).active ~ #marker::before { background: #5da6ff; box-shadow: 0 0 15px #5da6ff, 0 0 30px #5da6ff, 0 0 45px #5da6ff, 0 0 60px #5da6ff; } ul li:nth-child(2).active ~ #marker::before { background: #ff0; box-shadow: 0 0 15px #ff0, 0 0 30px #ff0, 0 0 45px #ff0, 0 0 60px #ff0; } ul li:nth-child(3).active ~ #marker::before { background: #0f0; box-shadow: 0 0 15px #0f0, 0 0 30px #0f0, 0 0 45px #0f0, 0 0 60px #0f0; } ul li:nth-child(4).active ~ #marker::before { background: #df2fff; box-shadow: 0 0 15px #df2fff, 0 0 30px #df2fff, 0 0 45px #df2fff, 0 0 60px #df2fff; } ul li:nth-child(5).active ~ #marker::before { background: #ff308f; box-shadow: 0 0 15px #ff308f, 0 0 30px #ff308f, 0 0 45px #ff308f, 0 0 60px #ff308f; } </style> </head> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0