jquery菱形边框菜单悬浮点击效果
代码语言:html
所属分类:菜单导航
代码描述:jquery菱形边框菜单悬浮点击效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,800&display=swap"); .nav { position: relative; display: -webkit-box; display: flex; list-style: none; padding: 10px 20px; } .nav a { position: relative; padding: 0.6em 2em; font-size: 20px; border: none; outline: none; color: #fff; display: inline-block; text-decoration: none; text-shadow: 1px 1px 0 #888; z-index: 3; } .nav .slide1, .nav .slide2 { position: absolute; display: inline-block; height: 0.4em; box-shadow: 1px 1px 0 #666; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05); -webkit-transform: skew(-20deg); transform: skew(-20deg); bottom: 0px; height: 100%; } .nav .slide1 { background-color: #eeeeee30; z-index: 2; } .nav .slide2 { opacity: 0; background-color: transparent; border: 1px solid #eeeeee70; z-index: 1; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background-color: #e0e0e0; font-family: poppins; line-height: 1.5; background: linear-gradient(110deg, #333 50%, #444 50%); } </style> </head> <body tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0