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/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Raleway:400,700); /***** [Variables] *****/ /* Geometry */ /* Colors */ /* Text */ /* Mixins */ /***** [Setup] *****/ body { font-family: "Raleway"; background: #C8F7C5; } .scene { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; perspective: 1800px; } .menu { position: relative; width: inherit; height: inherit; transform: rotateX(45deg) rotateZ(45deg); transform-style: preserve-3d; /***** [Menu open state] *****/ /* Show each layer's text */ /**** [Hover state] *****/ /***** [Layer styling] *****/ } .menu input[type=checkbox] { visibility: hidden; } input[type=checkbox]:checked ~ .menu__layer label .layer__content { visibility: visible; } .menu input[type=checkbox]:checked ~ .top { transform: translate3d(-200px, 0, 40px); /* Hide the menu icon */ } .menu input[type=checkbox]:checked ~ .top label .icon { visibility: hidden; } .menu input[type=checkbox]:checked ~ .middle { transform: translate3d(0, 0, 40px); } .menu input[type=checkbox]:checked ~ .bottom { transform: translate3d(200px, 0, 40px); /* Hide the shadow */ } .menu input[type=checkbox]:checked ~ .bottom:after { visibility: hidden; } .menu:hover .menu__layer.top { transform: translateZ(120px); } .menu:hover .menu__layer.middle { transform: translateZ(80px); } .menu:hover .menu__layer.bottom { transform: translateZ(40px); /* Show the shadow */ } .menu:hover .menu__layer.bottom:after { visibility: visible; } .menu__layer { position: absolute; width: inherit; height: inherit; transition: all 200ms ease; } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0