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