FAB

<div class="fabw">
  <div class="app-bg"><div class="bar" style="width:65%"></div><div class="bar" style="width:40%"></div></div>
  <div class="mini m1" aria-hidden="true">📷</div>
  <div class="mini m2" aria-hidden="true">📝</div>
  <div class="mini m3" aria-hidden="true">🎙️</div>
  <button class="fab" id="fabbtn" aria-label="새로 만들기" aria-haspopup="true" aria-expanded="false">+</button>
</div>

.fabw{position:absolute;inset:0}
.app-bg{position:absolute;inset:0;padding:16px;display:grid;gap:10px;align-content:start}
.bar{height:9px;border-radius:5px;background:var(--line)}
.fab{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .25s}
.fab[aria-expanded=true]{transform:rotate(45deg)}
.mini{position:absolute;right:22px;bottom:22px;width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;opacity:0;transform:scale(.4);transition:transform .28s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.fabw[data-open] .m1{transform:translate(-4px,-64px) scale(1);opacity:1}
.fabw[data-open] .m2{transform:translate(-46px,-42px) scale(1);opacity:1}
.fabw[data-open] .m3{transform:translate(-58px,4px) scale(1);opacity:1}

const wrap = document.querySelector('.fabw'), fab = document.getElementById('fabbtn');
function open(v) { wrap.toggleAttribute('data-open', v); fab.setAttribute('aria-expanded', String(v)); }
let auto = true;
fab.addEventListener('click', () => { auto = false; open(!wrap.hasAttribute('data-open')); });
function loop() { if (!auto) return; open(true); setTimeout(() => { if (auto) { open(false); setTimeout(loop, 900); } }, 1800); }
setTimeout(loop, 600);