css实现按钮悬浮变成子菜单图标导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现按钮悬浮变成子菜单图标导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700'> <style> *, *:before, *:after { box-sizing: border-box; outline: none; } html { font-family: "Source Sans Pro", sans-serif; font-size: 16px; font-smooth: auto; font-weight: 300; line-height: 1.5; color: #444; } body { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: #bdc3c7; } .hover { position: relative; display: flex; align-items: center; justify-content: center; width: 300px; height: 75px; background-color: #4DB6AC; border-radius: 99px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; } .hover:before, .hover:after { position: absolute; top: 0; display: flex; align-items: center; width: 50%; height: 100%; transition: 0.25s linear; z-index: 1; } .hover:before { content: ""; left: 0; justify-content: flex-end; background-color: #4DB6AC; } .hover:after { content: ""; right: 0; justify-content: flex-start; background-color: #44a69c; } .hover:hover { background-color: #46627f; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .hover:hover span { opacity: 0; z-index: -3; } .hover:hover:before { opacity: 0.5; transform: translateY(-1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0