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/ionicons.min.css"> <style> :root { font-size: 22px; background: #FCE2D4; } .container { position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .container:nth-of-type(2) { transform: translateX(50%) translateY(-50%); } @-webkit-keyframes open-mega-button { from { transform: rotate(0); } to { transform: rotate(45deg); } } @keyframes open-mega-button { from { transform: rotate(0); } to { transform: rotate(45deg); } } @-webkit-keyframes open-content { from { transform: rotate(0) scale(0); } to { transform: rotate(-45deg) scale(1); } } @keyframes open-content { from { transform: rotate(0) scale(0); } to { transform: rotate(-45deg) scale(1); } } @-webkit-keyframes open-button-1 { from { border-radius: 3rem 0 0 0; transform: translateX(0) translateY(0); } 50% { border-radius: 3rem 0 0 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(-.5rem) translateY(-.5rem); } } @keyframes open-button-1 { from { border-radius: 3rem 0 0 0; transform: translateX(0) translateY(0); } 50% { border-radius: 3rem 0 0 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(-.5rem) translateY(-.5rem); } } @-webkit-keyframes open-button-2 { from { border-radius: 0 3rem 0 0; transform: translateX(0) translateY(0); } 50% { border-radius: 0 3rem 0 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(.5rem) translateY(-.5rem); } } @keyframes open-button-2 { from { border-radius: 0 3rem 0 0; transform: translateX(0) translateY(0); } 50% { border-radius: 0 3rem 0 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(.5rem) translateY(-.5rem); } } @-webkit-keyframes open-button-3 { from { border-radius: 0 0 0 3rem; transform: translateX(0) translateY(0); } 50% { border-radius: 0 0 0 3rem; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(-.5rem) translateY(.5rem); } } @keyframes open-button-3 { from { border-radius: 0 0 0 3rem; transform: translateX(0) translateY(0); } 50% { border-radius: 0 0 0 3rem; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(-.5rem) translateY(.5rem); } } @-webkit-keyframes open-button-4 { from { border-radius: 0 0 3rem 0; transform: translateX(0) translateY(0); } 50% { border-radius: 0 0 3rem 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(.5rem) translateY(.5rem); } } @keyframes open-button-4 { from { border-radius: 0 0 3rem 0; transform: translateX(0) translateY(0); } 50% { border-radius: 0 0 3rem 0; transform: translateX(0) translateY(0); } to { border-radius: 1rem; transform: translateX(.5rem) translateY(.5rem); } } .mega-button { position: relative; height: 6rem; width: 6rem; font-size: 1.2rem; } .mega-button > .icon { position: absolute; top: 50%; left: 50%; font-size: 2rem; transform: translateX(-50%) translateY(-50%) scale(1); color: #FCE2D4; } .mega-button > .button { display: inline-block; float: left; height: 3rem; width: 3rem; background: #9A348E; color: #FFFFFF; } .mega-button > .button:nth-of-type(1) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0