滚动卡片移动顺滑选项卡菜单效果
代码语言:html
所属分类:选项卡
代码描述:滚动卡片移动顺滑选项卡菜单效果
下面为部分代码预览,完整代码请点击下载或在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> body { background: #37474f; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; overflow: hidden; } #navbarContainer { width: 400px; min-width: 400px; height: 70vh; background-color: #ffcc80; border-radius: 20px; display: flex; justify-content: flex-end; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } #navbar { width: 100%; height: 60px; background-color: #fff; position: absolute; } #bubbleWrapper { position: absolute; display: flex; justify-content: space-around; width: 100%; bottom: 25px; } .bubble { background-color: #fff; width: 50px; height: 50px; bottom: 85px; border-radius: 50%; z-index: 1; transform: translateY(120%); display: flex; justify-content: center; align-items: center; } .icon { opacity: 0; } #bubble1 { transform: translateY(0%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } #bubble1 > span { opacity: 0.7; } #bgWrapper { filter: url(#goo); width: 100%; height: 100px; position: absolute; bottom: 60px; } #bg { background-color: #ffcc80; width: 120%; height: 100%; margin-left: -10%; } #bgBubble { position: absolute; background-color: #ffcc80; width: 70px; height: 70px; border-radius: 50%; bottom: -50px; left: 50px; transform: translateX(-50%); } #menuWrapper { position: absolute; width: 100%; display: flex; justify-content: space-around; } .menuElement { opacity: 0.4; transform: translateY(100%); cursor: pointer; } .menuElement:hover { opacity: 0.5; } #contentWrapper { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; } #contentWrapper h2 { color: #fff; font-family: sans-serif; font-weight: 400; } .content { display: none; opacity: 0; } </style> </head> <body> <div id="navbarContainer"> <div id="navbar"> <div id="bubbleWrapper"> <div id="bubble1" class="bubble"><span class="icon"><i class="fa fa-send"></i></span></div> <div id="bubble2" class="bubble"><span class="icon"><i class="fa fa-envelope"></i></span></div> <div id="bubble3" class="bubble"><span class="icon"><i class="fa fa-twitter"></i></span></div> <div id="bubble4" class="bubble"><span class="icon"><i class="fa fa-diamond"></i></span></div> </div> <div id="menuWrapper"> <div id="menu1" class="menuElement&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0