css实现科技型圆环多级菜单效果代码-html代码-BFW代码库

css实现科技型圆环多级菜单效果代码

代码语言：html

代码描述：css实现科技型圆环多级菜单效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        html,body {
    	overflow:hidden;
    }
    .nav-bak-inner {
    	width:150px;
    	height:150px;
    	margin:200px auto;
    	/*background-color:#00E1F3;
    	*/		border-radius:0 0 150px 0;
    	position:relative;
    	background-image:url(//repo.bfw.wiki/bfwrepo/images/menu/04.png);
    	background-position:3px -8px;
    	background-size:cover;
    }
    .nav-item {
    	width:150px;
    	height:150px;
    	border-radius:0 0 150px 0;
    	background-image:url(//repo.bfw.wiki/bfwrepo/images/menu/04.png);
    	position:absolute;
    	transform-origin:0 0;
    	background-position:3px -8px;
    	background-size:cover;
    }
    .nav-link {
    	transform-origin:0 0;
    	transition:all .6s .5s linear;
    	position:absolute;
    	left:0px;
    	top:0px;
    	cursor:pointer;
    }
    .nav-item-link {
    	width:0px;
    	height:0px;
    	position:absolute;
    	border-radius:0 0 200px 0;
    	transform-origin:0 0;
    	transition:all .5s .1s linear;
    }
    .nav-item:hover .nav-item-link {
    	width:200px;
    	height:200px;
    }
    .nav-item:hover .nav-text-link {
    	padding-left:120px;
    	padding-top:30px;
    }
    .nav-item:hover .nav-link {
    	transform:rotateZ(-50deg);
    }
    .nav-bg-link {
    	background-image:url(//repo.bfw.wiki/bfwrepo/images/menu/01.png);
    	width:100%;
    	height:100%;
    	background-repeat:no-repeat;
    	transform:rotateZ(77deg);
    	background-position:63% 18%;
    }
    .nav-item-link:nth-child(1) {
    	transform:rotateZ(45deg);
    }
    .nav-item-link:nth-child(2) {
    	transform:rotateZ(90deg);
    }
    .nav-item-link:nth-child(3) {
    	transform:rotateZ(135deg);
    }
    .nav-item-link:nth-child(4) {
    	transform:rotateZ(180deg);
    }
    .nav-item-link:nth-child(5) {
    	transform:rotateZ(225deg);
    }
    .nav-item-link:nth-child(6) {
    	transform:rotateZ(270deg);
    }
    /*.nav-item:hover {
    	background-color:red;
    }
    */	.nav-item:nth-child(1) {
    	transform:rotateZ(0deg);
    	background:transparent;
    	z-index:1;
    	border-left:0;
    }
    .nav-item:nth-child(2) {
    	transform:rotateZ(72deg);
    }
    .nav-item:nth-child(3) {
    	transform:rotateZ(144deg);
    }
    .nav-item:nth-child(4) {
    	transform:rotateZ(216deg);
    }
    .nav-item:nth-child(5) {
    	transform:rotateZ(288deg);
    	border-left:none;
    }
    .nav-item:nth-child(6) {
    	transform:rotateZ(306deg);
    }
    .triangle:hover {
    	border-top:116.27px solid red;
    }
    .nav-center {
    	position:absolute;
    	width:120px;
    	height:120px;
    	border-radius:50%;
    	left:-60px;
    	top:-60px;
    	background:#00264D url(//repo.bfw.wiki/bfwrepo/images/menu/03.png) no-repeat center;
    	z-index:1;
    	border:1px solid #00EBFA;
    	background-size:70%;
    }
    .nav-text {
    	color:#001E41;
    	padding:40px;
    	display:inline-block;
    	transform:rotateZ(-54deg);
    }
    .nav-text-link {
    	transition:all .5s .1s linear;
    	color:#001E41;
    	padding-left:0px;
    	display:inline-block;
    	transform:rotateZ(53deg);
    	padding-top:0px;
    }
    .nav-item:nth-child(3)>.nav-text {
    	transform:rotateZ(122deg);
    }
    .nav-item:nth-child(4)>.nav-text {
    	transform:rotateZ(122deg);
    }
    .nav-item:nth-child(5)>.nav-text {
    	transform:rotateZ(122deg);
    }
    </style>
</head>

<body>
    <div class="nav-bak-inner">
        <div class="nav-item"><span class="nav-text">菜单一</span>
            <div class="nav-link">
                <div class="nav-item-link">
                    <div class="nav-bg-link"><span class="nav-text-link">链接一1</span></div>
                </div>
                <div class="nav-item-link">
                    <div class="nav-bg-link"><span class="nav-text-link">链接一2</span></div>
                </div>
   .........完整代码请登录后点击上方下载按钮下载查看