css实现弹出圆环按钮子菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现弹出圆环按钮子菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> body { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(to left, #2bc0e4, #eaecc6); } .menu-checkbox { display: none; } .menu { position: relative; } .menu-dots { width: 5rem; height: 5rem; border-radius: 50%; box-shadow: 0 0 0 0.3rem #161e3f; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(90deg); transition: 0.3s; cursor: pointer; } .menu-dots:hover { box-shadow: 0 0 0 0.3rem #161e3f, 0 0 0 1rem rgba(22, 30, 63, 0.16); transform: scale(1.2) rotate(90deg); } .menu-dot { width: 0.45rem; height: 0.45rem; background-color: #161e3f; border-radius: 50%; } .menu-dot + .menu-dot { margin-top: 0.3rem; } .menu-items { position: absolute; top: -2.3rem; left: -2.2rem; width: 9.4rem; height: 11rem; color: #fff; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; transition: 0.3s; } .menu-item { transform: scale(0.5); filter: blur(10px); transition: 0.3s; } .menu-item:nth-child(odd) { text-align: right; } .menu-item:nth-child(even) { text-align: left; } .menu-item:first-child, .menu-item:last-child { grid-column: span 2; text-align: center; } .menu-checkbox:checked + .menu > .menu-dots { transform: none; box-shadow: 0 0 0 3.4rem #161e3f; } .menu-checkbox:checked + .menu > .menu-items { opacity: 1; pointer-events: auto; } .menu-closer-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; border-radius: 50%; z-index: 2; pointer-events: none; } .menu-checkbox:checked + .menu > .menu-items > .menu-item { opacity: 1; transform: none; filter: none; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(1) { transition-delay: 0.05s; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(2) { transition-delay: 0.1s; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(3) { transition-delay: 0.15s; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(4) { transition-delay: 0.2s; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(5) { transition-delay: 0.25s; } .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(6) { transition-delay: 0.3s; } .menu-checkbox:checked + .menu > .menu-closer-overlay { pointer-events: auto; cursor: pointer; } </style> </head> <body > <input class="menu-checkbox" id="menu" type="checkbox" name="menu" /> <nav class="menu"> <label class="menu-dots" for="menu"> <span class="menu-dot"></span> <span class="menu-dot"></span> <span class="menu-dot"></span> </label> <ul class="menu-items"> <li class="menu-item"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25 8C9.25 9.24264 8.24264 10.25 7 10.25C5.75736 10.25 4.75 9.24264 4.75 8C4.75 6.75736 5.75736 5.75 7 5.75C8.24264 5.75 9.25 6.75736 9.25 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9.25 16C9.25 17.2426 8.24264 18.25 7 18.25C5.75736 18.25 4.75 17.2426 4.75 16C4.75 14.7574 5.75736 13.75 7 13.75C8.24264 13.75 9.25 14.7574 9.25 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 15L19.25 6.75" stroke=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0