径向动画菜单
*{margin: 0;padding: 0;}
body{background: #292a38;font-family: 'Arial Negreta', 'Arial','微软雅黑';}
.nav-wrap{position: relative;width: 400px;height: 400px;margin: 120px auto 20px;border: 2px dotted #4e5061;border-radius:100%;}
.nav-wrap .main-nav{position: absolute;left: 50%;top: 50%;text-align: center;text-decoration: none;color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px #000;background: #15a5f3;font-size: 12px;height: 40px;line-height: 40px;cursor: pointer;transform: translate(-50%,-50%);padding:0 5px;}
.nav-wrap nav{position: absolute;width: 100%;height: 100%;transform: scale(0);transition: all 0.5s ease-out;opacity: 0;}
.nav-wrap.active nav{transform: scale(1);opacity: 1;}
.nav-wrap nav a{display:inline-block;position: absolute;height: 30px;background: #f44283;text-align: center;line-height: 30px;text-decoration: none;color: #fff;border-radius: 3px;padding:0 5px;}
web前端必备技能
