svg+css实现圆形环形伸缩菜单代码-html代码-BFW代码库

svg+css实现圆形环形伸缩菜单代码

代码语言：html

代码描述：svg+css实现圆形环形伸缩菜单代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
        nav {
                --degrees: 360deg; /* amount of degrees in which to divide the item postions (max 360deg) */
                --degree-start: -90deg; /* degree where to start placing the items - it will start at the 3 o'clock postion by default */
                --radius: 80px; /* radius of circle - distance from center*/
                --items: 5;

                --icon-size: 60px;
                --icon-padding: 1rem;
                --icon-clr: rgb(241, 245, 249);
                --icon-clr-hover: white;

                --nav-bg-clr: rgba(89, 22, 139, 0.75);
                --nav-toggle-bg-clr: rgb(112, 8, 231);

                --nav-trans-duration: 300ms;
                --nav-trans-easing: ease-in-out;
                --nav-width-expanded: calc(var(--icon-size) + var(--radius) * -2);

                position: fixed;
                inset: 0;
                margin: auto;
                width: var(--icon-size);
                aspect-ratio: 1;
                background-color: var(--nav-bg-clr);
                border-radius: 50%;
                color: white;
                transition: all var(--nav-trans-duration) var(--nav-trans-easing);
                /* expanding background */
                &::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background-color: inherit;
                        border-radius: inherit;
                        backdrop-filter: blur(3px);
                        transition: inset var(--nav-trans-duration) var(--nav-trans-easing);
                }

                /* all buttons/links centered */
                & > * {
                        position: absolute;
                        inset: 0;
                        margin: auto;
                        color: white;
                        width: var(--icon-size);
                        height: var(--icon-size);
                        padding: var(--icon-padding);
                        border-radius: 50%;
.........完整代码请登录后点击上方下载按钮下载查看