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