react实现左右伸缩弹出子菜单按钮效果代码
代码语言:html
所属分类:菜单导航
代码描述:react实现左右伸缩弹出子菜单按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <style> body { margin: 0; padding: 0; } .base { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: #cefdc5; } .base button { outline: none; } .base .expandable-button { height: 9rem; width: 9rem; background: #384f5f; color: #cefdc5; border-radius: 100px; cursor: pointer; transition: all 0.3s cubic-bezier(0.52, 0.36, 0.65, 0.52); display: flex; align-items: center; justify-content: center; overflow: hidden; border: none; transform: scale(0.7); } .base .expandable-button:hover { box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7); } .base .expandable-button .side-buttons { height: 9rem; width: 9rem; border-radius: 50%; background: none; border: none; cursor: pointer; opacity: 0; font-size: 0rem; position: absolute; } .base .expandable-button .middle-button { -webkit-appearance: none; font-size: 9rem; transition: all 0.4s ease; max-height: 9rem; max-width: 9rem; height: 9rem; width: 9rem; border-radius: 50%; background: #384f5f; display: flex; align-items: center; justify-content: center; border: 12px solid transparent; color: #cefdc5; z-index: 2; cursor: pointer; box-sizing: border-box; aspect-ratio: 1/1; -webkit-text-size-adjust: unset; -webkit-text-size-adjust: unset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .base .expandable-button i { color: #cefdc5; } .base .expandable-button.expand { width: 30rem; } .base .expandable-button.expand .side-buttons { opacity: 1; font-size: 3rem; transition: opacity 0.3s ease 0.2s, transform 0.4s ease 0.1s, font-size 0.3s cubic-bezier(0.52, 0.36, 0.65, 0.52) 0.1s, margin-bottom cubic-bezier(0.52, 0.36, 0.65, 0.52) 0.2s; } .base .expandable-button.expand .side-buttons:nth-child(1) { transform: translatex(-10rem); } .base .expandable-button.expand .side-buttons:nth-child(3) { transform: translatex(10rem); } .base .expandable-button.expand .side-buttons:hover { margin-bottom: 1rem; transition: margin-bottom cubic-bezier(0.52, 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0