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