浮标菜单特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Buoy Menu</title> <style> html,body{ margin: 0px; padding: 0px; background-color: lightblue; font-family: 'Roboto', sans-serif; } h1{ position: absolute; top: 50%; left: 50%; padding-bottom: 350px; transform: translate(-50%, -50%); font-size: 60px; z-index: -1; color: white; text-align: center; } h2{ text-align: center; } ::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .navigation-container{ display: grid; grid-template-columns: repeat(5, auto); justify-items: center; height: 0px; } .buoy{ padding: 10px 18px 14px 18px; margin-left: 20px; min-width: 100px; font-size: 16px; background-color: white; border-radius: 5px 5px 30px 30px; cursor: pointer; background-color: #ff5252; color: white; border: none; line-height: 1.4em; box-shadow: 0px 40px 15px 0px #3e97d6, 0px 3px 0px 0px #333333; } .buoy::before{ position: absolute; display: block; left: 50%; bottom: 46px; height: 100px; w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0