绳子下拉菜单特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html{ height: 100%; } body{ font-family: Arial; margin: 0px; height: 100%; --color: #2196F3; --bgColor: #424242; color: var(--color); background-color: var(--bgColor); } *{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } #nav{ position: fixed; transform: translateY(-70vh); overflow: visible; } canvas{ display: none; } #nav > #content{ box-sizing: border-box; margin: 0px; padding: 20vh 10px 10vh 10px; height: 70vh; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); background-color: #616161; } #nav > #content > h1{ color: #eee; margin: 0px; text-align: center; } #nav > #content > div{ margin: 30px auto; display: flex; justify-content: center; align-items: center; } #nav > #content a{ margin: 10px; font-size: 20px; } #nav > #rope{ width: 100vw; height: 100vh; display: block; } #nav > #rope > circle{ fill: var(--bgColor); stroke: var(--color); cursor: pointer; -webkit-tap-highlight-color: transparent; } #nav > #rope > path{ stroke: var(--color); } #page{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--textColor); } #page > h1{ font-size: 50px; } </style> </head> <body translate="no"> <div id="nav.........完整代码请登录后点击上方下载按钮下载查看
网友评论0