菜单点击弹出子菜单效果
代码语言: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/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap'); body { background: #f0a500; } .main-btn { /* background: #6985c4; */ background: #e11d74; color: black; height: 60px; width: 60px; border-radius: 50%; position: fixed; box-sizing: border-box; border: 2px solid #440047; /* bottom: 10px; right: 10px; */ left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Poppins", sans-serif; text-align: center; z-index: 10; transition: 1s; display: flex; align-items: center; justify-content: center; cursor: pointer; } .fab, .fa{ font-size: 30px; color: black; text-shadow: 0 0 10px white; } .sub-btns { height: 60px; width: 60px; position: fixed; /* bottom: 10px; right: 10px; */ left: 50%; top: 50%; transform: translate(-50%, -50%); } .sub-btns > div { box-sizing: border-box; background: #e11d74; height: 60px; width: 60px; border-radius: 50%; position: relative; box-sizing: border-box; border: 2px solid #440047; transition: 1s; display: flex; align-items: center; justify-content: center; } .btn2 { bottom: 60px; } .btn3 { bottom: 120px; } .btn4 { bottom: 180px; } .touch { height: 50px !important; width: 50px !important; font-family: "poppins"; } .btn5 { bottom: 240px; left: 5px; } .btn6 { bottom: 290px; left: 5px; } .btn7 { bottom: 340px; left: 5px; } .btn8 { bottom: 390px; left: 5px; } .btn9 { bottom: 440px; left: 5px; } </style> </head> <body translate="no" > <div class="main-btn" id="main-btn" onclick="animateButton()"> <i class="fa fa-user"></i> </div> <div class="sub-btns"> <div class="btn1" id="btn1"> <center> <a href=""> <i class="fab fa-linkedin"></i> </a> </center> </div> <div class="btn2" id="btn2"> <center> <a href=""> <i class="fab fa-instagram"></i> </a> </center> </div> <div class="btn3" id="btn3"> <center> <a href=""> <i class="fab fa-twitter"></i> </a> </center> </div> <div class="btn4" id="btn4"> <center> <a href=""> <i class="fab fa-git.........完整代码请登录后点击上方下载按钮下载查看
网友评论0