css实现悬浮菜单点击弹出 五角子菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现悬浮菜单点击弹出 五角子菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { --btn-size: 150px; --accent-color: red; width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; background: #efefef; font-size: calc(var(--btn-size) * .55); } .menu { position: relative; width: var(--btn-size); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; text-align: center; color: white; cursor: pointer; user-select: none; transition: 0.75s; line-height: 100%; } .menu:after { content: '\2630'; width: var(--btn-size); aspect-ratio: 1 / 1; position: absolute; left: 0; top: 0; display: grid; place-items: center; background: var(--accent-color); border-radius: inherit; font-size: calc(var(--btn-size) * .48); transition: .75s; box-shadow: 0 10px 15px rgba(0,0,0,.5); } .open_menu:after { content: '\00D7'; background: gray; } .nav-item { width: var(--btn-size); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--accent-color); position: absolute; transition: 0.75s; user-select: none; left: 0; top: 0; transform: scale(0.1); box-shadow: 0 5px 5px rgba(0,0,0,.25); text-decoration: none; font-family: sans-serif; color: white; box-sizing: border-box; display: grid; place-items: center; } .open_menu .nav-item { transform: scale(1) rotate(360deg); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0