css实现右侧悬浮菜单三维折叠显示收缩效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现右侧悬浮菜单三维折叠显示收缩效果代码
代码标签: 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/reset.min.css"> <style> body { font-family: Arial, Helvetica; text-transform: uppercase; font-size: 12px; } #menu { color: white; width: 250px; height: 350px; position: fixed; top: 50px; right: -200px; transition: all 0.75s ease-in-out; -webkit-perspective: 300px; -webkit-perspective-origin: 50% 50%; transform: translate3d(0px, 0px, 0px) rotateY(0deg); } #menu .holder { width: 50px; height: 100%; background-color: #000; position: absolute; top: 0px; left: 0px; } #menu .holder ul { position: relative; top: 50%; transform: translateY(-50%); transition: all 0.75s ease-in-out; } #menu .holder ul li { transition: all 0.75s ease-in-out; line-height: 30px; display: block; width: 100%; text-align: center; border-bottom: 1px solid #1a1a1a; } #menu .holder ul li:last-child { border: none; } #menu .content { position: absolute; width: 200px; height: 100%; color: white; top: 0px; left: 50px; background-color: #101010; transition: all 0.75s ease-in-out; transform-origin: 0 50%; transform: translate3d(0px, 0px, 0px) rotateY(90deg); transform-style: preserve-3d; } #menu .content ul { position: relative; top: 50%; transform: translateY(-50%); transition: all 0.75s ease-in-out; } #menu .content ul li { transition: all 0.75s ease-in-out;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0