<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<style>
body{
background-color: #ffffff;
font-family: sans-serif;
overflow: hidden;
}
.navbar{
width:200px;
height: 200px;
line-height: 200px;
border-radius: 50%;
background: #ff0000;
margin:190px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 2.75em;
font-weight: bold;
color:#ffffff;
transition: 0.24s 0.2s;
}
.navbar .menu{
list-style: none;
padding:0;
margin:0;
position: absolute;
top:-65px;
left:-65px;
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:-95px;
left:-95px;
transform-origin:110px 110px;
transition: all 0.5s 0.1s;
}
.navbar:hover .menu li{
transition: all 0.7s;
}
.navbar .menu li a{
width:45px;
height:45px;
line-height:45px;
border-radius:50%;
background:#ff0000;
position: absolute;
font-size: 59%;
color:#ffffff;
transition: 0.7s;
text-decoration: none;
}
.navbar:hover .menu li:nth-child(1){
transition-delay: 0.02s;
transform: rotate(75deg);
}
.navbar:hover .menu li:nth-child(1) a{
transition-delay: 0.04s;
transform: rotate(645deg);
}
.navbar:hover .menu li:nth-child(2){
transition-delay: 0.04s;
transform: rotate(110deg);
}
.navbar:hover .menu li:nth-child(2) a{
transition-delay: 0.08s;
transform: rotate(610deg);
}
.navbar:hover .menu li:nth-child(3){
transition-delay: 0.06s;
transform: rotate(145deg);
}
.navbar:hover .menu li:nth-child(3) a{
transition-delay: 0.08s;
transform: rotate(575deg);
}
.navbar:hover .menu li:nth-child(4){
transition-delay: 0.08s;
transform: rotate(180deg);
}
.navbar:hover .menu li:nth-child(4) a{
transition-delay: 0.16s;
transform: rotate(540deg);
}
.navbar:hover .menu li:nth-child(5){
transition-delay: 0.1s;
transform: rotate(215deg);
}
.navbar:hover .menu li:nth-child(5) a{
transition-delay: 0.2s;
transform: rotate(515deg);
}
.navbar:hover .menu li:nth-child(6){
transition-delay: 0.12s;
transform: rotate(250deg);
}
.navbar:hover .menu li:nth-child(6) a{
transition-delay: 0.24s;
transform: rotate(470deg);
}
.navbar:hover .menu li:nth-child(7){
transition-delay: 0.14s;
transform: rotate(285deg);
}
.navbar:hover .menu li:nth-child(7) a{
transition-delay: 0.28s;
transform: rotate(435deg);
}
.navbar:hover .menu li:nth-child(8){
transition-delay: 0.16s;
transform: rotate(320deg);
}
.navbar:hover .menu li:nth-child(8) a{
transition-delay: 0.32s;
transform: rotate(400deg);
}
.navbar:hover .menu li:nth-child(9){
transition-delay: 0.18s;
transform: rotate(357deg);
}
.navbar:hover .menu li:nth-child(9) a{
transition-delay: 0.36s;
transform: rotate(365deg);
}
.navbar:hover .menu li:nth-child(10){
transition-delay: 0.2s;
transform: rotate(395deg);
}
.navbar:hover .menu li:nth-child(10) a{
transition-delay: 0.4s;
transform: rotate(280deg);
}
</style>
</head>
<body>
<div class="navbar">MENU
<ul class="menu">
<li><a href="" class="fab fa-facebook-f"></a></li>
<li><a href="" class="fab fa-instagram"></a></li>
<li><a href="" class="fab fa-linkedin-in"></a></li>
<li><a href="" class="fab fa-google-plus-g"></a></li>
<li><a href="" class="fab fa-twitter"></a></li>
<li><a href="" class="fab fa-github"></a></li>
<li><a href="" class="fab fa-skype"></a></li>
<li><a href="" class="fab fa-google-drive"></a></li>
<li><a href="" class="fas fa-cloud"></a></li>
<li><a href="" class="fas fa-rss"></a></li>
</ul>
</div>
</body>
</html>
NB : Simpan dan silahkan mencobanya di browser atau aplikasi anda
0 Komentar