css实现悬浮伸缩菜单效果代码-html代码-BFW代码库

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) .........完整代码请登录后点击上方下载按钮下载查看