html实现钢琴布局效果
代码语言:html
所属分类:布局界面
代码描述:html实现钢琴布局效果,带悬浮走光动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> :root { --space: 6px; --width: 600px; --width-with-offset: 606px; --white-width: calc((var(--width) - var(--space) * 6) / 7); --white-offset: calc(var(--width-with-offset) / 7); --black-width: calc(var(--white-offset) / 2 - 2px); } BODY { min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: black; } DIV { position: relative; width: var(--width); height: 300px; border-radius: 1rem; overflow: hidden; } DIV::before, DIV::after { content: ""; position: absolute; top: 0; } DIV::before { content: ""; width: calc(var(--white-width)); height: 100%; background: tomato; border-radius: 0 0 1rem 1rem; box-shadow: var(--white-offset) 0 0 darkorange, calc(var(--white-offset) * 2) 0 0 gold, calc(var(--white-offset) * 3) 0 0 yellowgreen, calc(var(--white-offset) * 4) 0 0 lightseagreen, calc(var(--white-offset) * 5) 0 0 teal, calc(var(--white-offset) * 6) 0 0 darkslateblue; -webkit-animation: colors 0.75s infinite; animation: colors 0.75s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } DIV:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } DIV::after { left: calc(var(--black-width) * 1.5); width: var(--black-width); height: 50%; background: black; border-radius: 0 0 0.5rem 0.5rem; box-shadow: var(--white-offset) 0 0 black, calc(var(--white-offset) * 3) 0 0 black, calc(var(--white-offset) * 4) 0 0 black, calc(var(--white-offset) * 5) 0 0 black; } @-webkit-keyframes colors { 14% { background: darkslateblue; box-shadow: var(--white-offset) 0 0 tomato, calc(var(--white-offset) * 2) 0 0 darkorange, calc(var(--white-offset) * 3) 0 0 gold, calc(var(--white-offset) * 4) 0 0 yellowgreen, calc(var(--white-offset) * 5) 0 0 lightseagreen, calc(var(--white-offset) * 6) 0 0 teal; } 28% { background: teal; box-shadow: var(--white-offset) 0 0 darkslateblue, calc(var(--white-offset) * 2) 0 0 tomato, calc(var(--white-offset) * 3) 0 0 darkorange, calc(var(--white-offset) * 4) 0 0 gold, calc(var(--white-offset) * 5) 0 0 yellowgreen, calc(var(--white-offset) * 6) 0 0 lightseagreen; } 42% { background: lightseagreen; box-shadow: var(--white-offset) 0 0 teal, calc(var(--white-offset) * 2) 0 0 darkslateblue, calc(var(--white-offset) * 3) 0 0 tomato, calc(var(--white-offset) * 4) 0 0 darkorange, calc(var(--white-offset) * 5) 0 0 gold, calc(var(--white-offset) * 6) 0 0 yellowgreen; } 57% { background: yellowgreen; box-shadow: var(--white-offset) 0 0 lightseagreen, calc(var(--white-offset) * 2) 0 0 teal, calc(var(--white-offset) * 3) 0 0 darkslateblue, calc(var(--white-offset) * 4) 0 0 tomato, calc(var(--white-offset) * 5) 0 0 darkorange, calc(var(--white-offset) * 6) 0 0 gold; } 72% { back.........完整代码请登录后点击上方下载按钮下载查看
网友评论0