3d三维层叠导航菜单按钮悬浮效果
代码语言:html
所属分类:菜单导航
代码描述:3d三维层叠导航菜单按钮悬浮效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> * { padding: 0px; margin: 0px; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #00071C; } ul { position: relative; display: flex; transform: rotate(-25deg) skew(25deg); transform-style: preserve-3d; } ul li { position: relative; list-style: none; width: 60px; height: 60px; margin: 0px 20px; } ul li:before{ content: ''; position: absolute; bottom: -10px; left: -5px; width: 100%; height: 10px; background: #2a2a2a; trnasform-origin: top; transform: skewX(-41deg); } ul li:after{ content: ''; position: absolute; top:5px; left: -9px; width: 9px; height: 100%; background: #2a2a2a; trnasform-origin: right; transform: skewY(-49deg); } ul li span{ position: absolute; top: 0; lef: 0; width: 100%; height: 100%; display: flex !important; background: #2a2a2a; justify-content: center; align-items: center; color: #fff; font-size: 30px !important; } ul li:hover span { z-index: 1000; transition: .3s; color: #fff; box-shadw: -1px 1px 1px rgba(0, 0, 0, .5); } ul li:hover span:nth-child(5){ transform: translate(40px, -40px); opacity: 1; } ul li:hover span:nth-child(4){ transform: translate(30px, -3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0