svg实现环形菜单伸缩弹出效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg实现环形菜单伸缩弹出效果代码，结合了modernizr和classie插件。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script>



    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
        
        * { 
          position: relative;
        	-moz-box-sizing: border-box;
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        	list-style: none;
        }
        
        html,
        body {
        	height: 100%;
        }
        
        body {
        	background: #52be7f;
        	color: #fff;
        }
        
        .component {
        	position: relative;
        	margin-bottom: 3em;
        	height: 15em;
        	background: rgba(0,0,0,0.05);
        	font-family: 'Lato', Arial, sans-serif;
        }
        
        .component > h2 {
        	position: absolute;
        	overflow: hidden;
        	width: 100%;
        	text-align: center;
        	text-transform: uppercase;
        	white-space: nowrap;
        	font-weight: 300;
        	font-style: italic;
        	font-size: 12em;
        	opacity: 0.1;
        	cursor: default;
        }
        
        .cn-button {
        	position: absolute;
        	top: 100%;
        	left: 50%;
        	z-index: 11;
        	margin-top: -2.25em;
        	margin-left: -2.25em;
        	padding-top: 0;
        	width: 4.5em;
        	height: 4.5em;
        	border: none;
        	border-radius: 50%;
        	background: none;
        	background-color: #fff;
        	color: #52be7f;
        	text-align: center;
        	font-weight: 700;
        	font-size: 1.5em;
        	text-transform: uppercase;
        	cursor: pointer;
        	-webkit-backface-visibility: hidden;
        }
        
        .csstransforms .cn-wrapper {
        	position: absolute;
        	top: 100%;
        	left: 50%;
        	z-index: 10;
        	margin-top: -13em;
        	margin-left: -13.5em;
        	width: 27em;
        	height: 27em;
        	border-radius: 50%;
        	background: transparent;
        	opacity: 0;
        	-webkit-transition: all .3s ease 0.3s;
        	-moz-transition: all .3s ease 0.3s;
        	transition: all .3s ease 0.3s;
        	-webkit-transform: scale(0.1);
        	-ms-transform: scale(0.1);
        	-moz-transform: scale(0.1);
        	transform: scale(0.1);
        	pointer-events: none;
        	overflow: hidden;
        }
        
        /*cover to prevent extra space of anchors from being clickable*/
        .csstransforms .cn-wrapper:after{
          content:".";
          display:block;
          font-size:2em;
          width:6.2em;
          height:6.2em;
          position: absolute;
          left: 50%;
          margin-left: -3.1em;
          top:50%;
          margin-top: -3.1em;
          border-radius: 50%;
          z-index:10;
          color: transparent;
        }
        
        .csstransforms .opened-nav {
        	border-radius: 50%;
        	opacity: 1;
        	-webkit-transition: all .3s ease;
        	-moz-transition: all .3s ease;
        	transition: all .3s ease;
        	-webkit-transform: scale(1);
        	-moz-transform: scale(1);
        	-ms-transform: scale(1);
        	transform: scale(1);
        	pointer-events: auto;
        }
        
        .csstransforms .cn-wrapper li {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	overflow: hidden;
        	margin-top: -1.3em;
        	margin-left: -10em;
        	width: 10em;
        	height: 10em;
        	font-size: 1.5em;
        	-webkit-transition: all .3s ease;
        	-moz-transition: all .3s ease;
        	transition: all .3s ease;
        	-webkit-transform: rotate(75deg) skew(62deg); 
        	-moz-transform: rotate(75deg) skew(62deg); 
        	-ms-transform: rotate(75deg) skew(62deg); 
        	transform: rotate(75deg) skew(62deg); 
        	-webkit-transform-origin: 100% 100%;
        	-moz-transform-origin: 100% 100%;
        	transform-origin: 100% 100%;
        	pointer-events: none;
        }
        
        .csstransforms .cn-wrapper li a {
        	position: absolute;
        
        	right: -7.25em;
        	bottom: -7.25em;
        	display: block;
        	width: 14.5em;
        	height: 14.5em;
        	border-radius: 50%;
        	background: #429a67;
        	background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
        	background: -moz-radial-gradient(transparent 35%, #429a67 35%);
        	background: radial-gradient(transparent 35%, #429a67 35%);
        	color: #fff;
        	text-align: center;
        	text-decoration: none;
        	font-size: 1.2em;
        	line-height: 2;
        	-webkit-transform: skew(-62deg) rotate(-75deg) scale(1);
        	-moz-transform: skew(-62deg) rotate(-75deg) scale(1);
        	-ms-transform: skew(-62deg) rotate(-75deg) scale(1);
        	transform: skew(-62deg) rotate(-75deg) scale(1);
        	-webkit-backface-visibility: hidden;
        	backface-visibility: hidden;
        	pointer-events: auto;
        }
        
        .csstransforms .cn-wrapper li a span {
        	position: relative;
        	top: 1em;
        	display: block;
        	font-size: .5em;
        	font-weight: 700;
        	text-transform: uppercase;
        }
        
        .csstransforms .cn-wrapper li a:hover,
        .csstransforms .cn-wrapper li a:active,
        .csstransforms .cn-wrapper li a:focus {
        	background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
        	background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
        	background: radial-gradient(transparent 35%, #449e6a 35%);
        }
        
        .csstransforms .opened-nav li {
        	-webkit-transition: all .3s ease .3s;
        	-moz-transition: all .3s ease .3s;
        	transition: all .3s ease .3s;
        }
        
        .csstransforms .opened-nav li:first-child {
        	-webkit-transform: skew(62deg);
        	-moz-transform: skew(62deg);
        	-ms-transform: skew(62deg);
        	transform: skew(62deg); 
        }
        
        .csstransforms .opened-nav li:nth-child(2) {
        	-webkit-transform: rotate(30deg) skew(62deg);
        	-moz-transform: rotate(30deg) skew(62deg);
        	-ms-transform: rotate(30deg) skew(62deg);
        	transform: rotate(30deg) skew(62deg);
        }
        
        .csstransforms .opened-nav  li:nth-child(3) {
        	-webkit-transform: rotate(60deg) skew(62deg);
        	-moz-transform: rotate(60deg) skew(62deg);
        	-ms-transform: rotate(60deg) skew(62deg);
        	transform: rotate(60deg) skew(62deg);
        }
        
        .csstransforms .opened-nav li:nth-child(4) {
        	-webkit-transform: rotate(90deg) skew(62deg);
        	-moz-transform: rotate(90deg) skew(62deg);
        	-ms-transform: rotate(90deg) skew(62deg);
        	transform: rotate(90deg) skew(62deg);
        }
        
        .csstransforms .opened-nav li:nth-child(5) {
        	-webkit-transform: rotate(120deg) skew(62deg);
        	-moz-transform: rotate(120deg) skew(62deg);
        	-ms-transform: rotate(120deg) skew(62deg);
        	transform: rotate(120deg) skew(62deg);
        }
        
        .csstransforms .opened-nav li:nth-child(6) {
        	-webkit-transform: rotate(150deg) skew(62deg);
        	-moz-transform: rotate(150deg) skew(62deg);
        	-ms-transform: rotate(150deg) skew(62deg);
        	transform: rotate(150deg) skew(62deg);
        }
        
        .csstransforms .opened-nav li:nth-child(7) {
        	-webkit-transform: rotate(180deg) skew(62deg);
        	-moz-transform: rotate(180deg) skew(62deg);
        	-ms-transform: rotate(180deg) skew(62deg);
        	transform: rotate(180deg) skew(62deg);
        .........完整代码请登录后点击上方下载按钮下载查看