背景悬浮切换导航效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Trocchi|Anton" rel="stylesheet"> <style> :root { --purple-brown: #231f20; --egg-shell: #e8e4d2; --dark-peach: #e26961; --border-width: .75rem; --dots-gap: 10px; } *, *:before, *:after { box-sizing: border-box; } body { font-family: Trocchi, Georgia, serif; line-height: 1.5; color: var(--egg-shell); } a { color: inherit; } .bg { background: inherit; min-height: 100vh; padding: 25vh 0 1.5rem; -webkit-transition: background 0s 1s, color .6s; transition: background 0s 1s, color .6s; } .projects { color: var(--purple-brown); } .bg:after { content: ""; border: var(--border-width) solid; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 12; pointer-events: none; -webkit-transition: 1s; transition: 1s; } .bio, .link-bio { background: var(--purple-brown); } .bio h1 { background-color: var(--dark-peach); } .projects, .link-projects { background: var(--egg-shell); } .find-me, .link-find-me { background: var(--dark-peach); } .transition { width: 1rem; height: 1rem; top: 0; display: block; position.........完整代码请登录后点击上方下载按钮下载查看
网友评论0