css实现三维手机菜单搜索立体界面交互效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现三维手机菜单搜索立体界面交互效果代码,可切换回二维界面。
代码标签: css 三维 手机 菜单 搜索 立体 界面 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato"); *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Lato, Sans-serif; font-size: 12px; background: #353138; background: -moz-radial-gradient(center, ellipse cover, #353138 0%, #1a181c 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c)); background: -webkit-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: -o-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: -ms-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%); background: radial-gradient(ellipse at center, #353138 0%,#1a181c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1); } .container { margin: auto; max-width: calc(1200px + 4rem); width: 100%; height: 100%; padding: 20px; -webkit-perspective: 1500px; -moz-perspective: 1500px; -ms-perspective: 1500px; perspective: 1500px; position: relative; } .toggle { color: #fff; display: inline-block; line-height: 16px; font-size: 20px; float: left; } .menu { margin: 100px auto; position: relative; background-color: black; width: 300px; border-style: solid; border-color: #fff; border-radius: 2rem; color: #fff; height: 540px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-box-shadow: 0 0 50px 0 #444; -moz-box-shadow: 0 0 50px 0 #444; box-shadow: 0 0 50px 0 #444; background-image: url(https://i.imgur.com/Vh3cRYl.gif); } input.toggle:checked ~ .menu { -webkit-transform: translateY(-200px) translateZ(-150px) rotateX(45deg) rotateZ(45deg); -moz-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg); -ms-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg); -o-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg); transform: translateY(-150px) rotateX(45deg) rotateZ(45deg); } .menu:before { content: ''; position: absolute; height: 30px; width: 261px; top: 535px; left: 10px; -webkit-transform: rotateX(90deg) translateY(-15px) translateZ(15px); -moz-transform: rotateX(90deg) translateY(-15px) translateZ(15px); -ms-transform: rotateX(90deg) translateY(-15px) translateZ(15px); -o-transform: rotateX(90deg) translateY(-15px) translateZ(15px); transform: rotateX(90deg) translateY(-15px) translateZ(15px); background: #fff; pointer-events: none; } .menu:after { content: ''; position: absolute; height: 511px; width: 30px; top: 8px; right: -30px; -webkit-transform: rotateY(90deg) translateZ(-15px) translateX(15px); -moz-transform: rotateY(90deg) translateZ(-15px) translateX(15px); -ms-transform: rotateY(90deg) translateZ(-15px) translateX(15px); -o-transform: rotateY(90deg) translateZ(-15px) translateX(15px); transform: rotateY(90deg) translateZ(-15px) translateX(15px); border-width: 20px 0; border-style: solid; border-color: #fff; background: white; pointer-events: none; } .menu .top { padding: 15px 15px 15px 20px; width: 100%; } .menu .top .search { position: relative; display: inline-block; } .menu .top .search input { background-color: transparent; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; color: transparent; border: 1px solid #fff; border-radius: 20px; padding: 10px 30px 10px 15px; outline: 0 none; width: 60px; height: 40px; position: relative; -webkit-transform: translateZ(1px); -moz-transform: translateZ(1px); -ms-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px); z-index: 2; } .menu .top .search input:focus { width: 200px; color: #fff; } .menu .top .search:after { content: '\f002'; font-family: 'FontAwesome'; font-size: 16px; position: absolute; color: #fff; top: 11px; right: 18px; width: 20px; height: 20px; pointer-events: none; -webkit-transform: translateZ(1px); -moz-transform: translateZ(1px); -ms-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px); z-index: 1; } .menu .top .exit { position: relative; display: inline-block; width: 40px; height: 40px; outline: 0 none; float: right; cursor: pointer; -webkit-transform: translateZ(1px); -moz-transform: translateZ(1px); -ms-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px); z-index: 2; } .menu .top .exit:focus, .menu .top .exit:active { border: 1px solid #fff; border-radius: 20px; } .menu .top .exit:before { content: ''; pointer-events: none; position: absolute; display: block; width: 30px; height: 30px; top: 14px; left: -6px; border-width: 0 2px 0 0; border-st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0