伸缩菜单特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css'> <style> /* basic style */ html, body { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; } body { display: flex; justify-content: center; align-items: center; background-color: #1c2026; } /* menu style */ .menu { width: calc(54px * 4 + 30px * 3); height: 54px; margin: 0 auto; -webkit-filter: url("#goo"); filter: url("#goo"); } ul { position: relative; margin: 0; padding: 0; list-style: none; } li { width: 54px; height: 54px; border-radius: 50%; cursor: pointer; } svg { overflow: hidden; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0