3d麻将形导航菜单效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> *, *:before, *:after { box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { display: flex; align-items: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } body { background: #f2f2f2; } ul { position: relative; -webkit-transform: rotate(-35deg) skew(20deg, 5deg); transform: rotate(-35deg) skew(20deg, 5deg); } .list-item { background: #000; color: #575757; text-align: center; height: 2.5em; width: 4em; vertical-align: middle; line-height: 2.5em; border-bottom: 1px solid #060606; position: relative; display: block; text-decoration: none; box-shadow: -2em 1.5em 0 #e1e1e1; transition: all .25s linear; } .list-item:hover { background: #ff6e42; color: #fffcfb; -webkit-transform: translate(0.9em, -0.9em); transform: translate(0.9em, -0.9em); transition: all .25s linear; box-shadow: -2em 2em 0 #e1e1e1; } .list-item:hover:before, .list-item:hover:after { transition: all .25s linear; } .list-item:hover:before { background: #b65234; width: 1em; top: .5em; left: -1em; } .list-item:hover:after { background: #b65234; width: 1em; bottom: -2.5em; left: 1em; height: 4em; } .list-item:before, .list-item:after { content: ''; position: absolute; transition: all .25s linear; width: .5em; } .list-item:after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0