JSFiddle - React, Tailwind, and code Playground

by c wf

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="navbar">主菜单
						<ul class="menu">
							<li><a href="#" class="fa fa-facebook"></a></li>
							<li><a href="#" class="fa fa-google-plus"></a></li>
							<li><a href="#" class="fa fa-twitter"></a></li>
							<li><a href="#" class="fa fa-linkedin"></a></li>
							<li><a href="#" class="fa fa-pinterest"></a></li>
							<li><a href="#" class="fa fa-rss"></a></li>
							<li><a href="#" class="fa fa-instagram"></a></li>
							<li><a href="#" class="fa fa-skype"></a></li>
							<li><a href="#" class="fa fa-github"></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

CSS

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style rel="stylesheet">
    *
{
	margin: 0;
	padding: 0;
}
*:after,
*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
ul>li {
	list-style: none;
}
body {
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "微软雅黑";,"Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a {
	color: rgba(255,255,255,0.6);
	outline: none;
	text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;
}
a:hover,a:focus {
	color: #74777b;
	text-decoration: none;
}

/*demo 样式*/
.container {
	padding: 2em 0;
	transform: translate3d(0.0.0);
}

.navbar {
	width: 150px;
	height: 150px;
	line-height: 150px;
	border-radius: 50%;
	background: #FFFFFF;
	margin: 70px auto;
	position: relative;
	cursor: pointer;
	text-align: center;
	font-size: 1.75em;
	font-weight: 500;
	color: #99b977;
	transition: 0.24s 0.2s;
	/*移动时X轴与Y轴 会有效果*/
}

.navbar:hover {
	background: rgba(255, 255, 255, 0.75);
}

.navbar .menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: -75px;
	left: -75px;
	border: 150px solid transparent;
	cursor: default;
	border-radius: 50%;
	transform: scale(0);
	transition: transform 1.4s 0.07s;
	z-index: -1;
}

.navbar:hover .menu {
	transition: transform 0.4s 0.08s, z-index 0s 0.5s;
	transform: scale(1);
	z-index: 1;
}

.navbar .menu li {
	position: absolute;
	top: -100px;
	left: -100px;
	transform-origin: 100px 100px;
	/*以圆心为中心扩大100px*/
	transition: all 0.5s 0.1s;
}

.navbar:hover .menu li {
	transition: all 0.5s;
}

.navbar .menu li a {
	width: 45px;
	height: 45px;
	line-height:...