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

svg实现环形菜单伸缩弹出效果代码

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