css+jquery实现简约菜单导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+jquery实现简约菜单导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,800&display=swap"); .nav { position: relative; 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; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05); 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: flex; justify-content: center; align-items: center; background-color: #e0e0e0; font-family: po.........完整代码请登录后点击上方下载按钮下载查看
网友评论0