带圆圈动画的“汉堡菜单”

Question

我有以下代码来制作“全屏”汉堡菜单动画。 第一个问题：使用常规CSS可以实现吗？ （或者如何在常规网站上使用它） 其次，如果用户不应该使用js，该如何进行备用？

*, *:after, *:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

a {
  text-decoration: none;

  &:active,
  &:focus,
  &:hover,
  &:visited {
    text-decoration: none;
  }
}

.has-offcanvas {
  position: fixed;
}

https://codepen.io/sigug/pen/yLeQMbB

谢谢