暗黑菜单弹出效果
代码语言:html
所属分类:菜单导航
代码描述:暗黑菜单弹出效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Dosis"); body { background-color: rgba(0, 0, 0, 0.9); } header { position: relative; min-height: 100vh; background-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 90%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 400px); display: flex; justify-content: center; align-items: center; overflow-x: hidden; } header h1 { position: relative; z-index: 2; font-family: "Dosis",sans-serif; color: white; text-transform: uppercase; font-size: 5rem; } .header-canvas { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } h1 { color: white; font-family: "Dosis"; } .bar { position: fixed; z-index: 10; top: 0; right: 0; background: black; transition: 0.25s; cursor: pointer; } .bar:before, .bar:after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0