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/all.5.6.1.css">
    <style>
        html,
        body {
          position: relative;
          width: 100%;
          height: 100%;
          margin: 0;
          overflow: hidden;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #1c2026;
        }
        
        /* menu style */
        .menu {
          width: calc(54px * 4 + 30px * 3);
          height: 54px;
          margin: 0 auto;
          -webkit-filter: url("#goo");
          filter: url("#goo");
        }
        
        ul {
          position: relative;
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        li {
          width: 54px;
          height: 54px;
          border-radius: 50%;
          cursor: pointer;
        }
        
        svg {
          overflow: hidden;
        }
        
        .ico01 {
          background-color: #d92567;
          position: relative;
          z-index: 4;
        }
        
        .ico02 {
          background-color: #d91e85;
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
          z-index: 3;
        }
        
        .ico03 {
          background-color: #f24405;
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
          z-index: 2;
        }
        
        .ico04 {
          background-color: #f23030;
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
          z-index: 1;
        }
        
        .move-ico {
          position: absolute;
          top: 0;
        }
        
        .active .ico02 {
          transform: translateX(calc(54px + 30px));
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
        }
        .active .ico03 {
          transform: translateX(calc(54px * 2 + 30px * 2));
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
        }
        .active .ico04 {
          transform: translateX(calc(54px * 3 + 30px * 3));
          transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
        }
        
        /* menu-object style */
        .menu-object {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: calc(54px * 4 + 30px * 3);
          height: 54px;
        }
        .menu-object .ico01::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          height: 24px;
          margin: auto;
          background-color: #fff;
          transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .menu-object .ico01::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 24px;
          height: 4px;
          margin: auto;
          background-color: #fff;
          transition: transform 0.8s cubic-b.........完整代码请登录后点击上方下载按钮下载查看