A Pen by Anthony

Thumbnail
This awesome code was written by anthonygermishuys, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anthonygermishuys ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Anthony</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
   
<div id="Map-Menu">
<i class="fa fa-search-plus"><div class="Map-Menu-Item" id="mapminus"></div></i>
<i class="fa fa-search-minus"><div class="Map-Menu-Item" id="mapminus"></div></i>
<i class="fa fa-times" onClick="CloseMapMenu()"><div class="Map-Menu-Item"></div></i>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-zjEdPL */
body {overflow:hidden;
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
background-color:#282828;background-size: 16px 16px;}

#Map-Menu {position:absolute;top:0;left:0;right:0;bottom:0;width:400px;height:400px;margin:auto;
border-radius:50%;overflow:hidden;pointer-events:none;
-webkit-mask:radial-gradient(circle 100px,transparent 157.5px,grey 158px);
-webkit-mask-size:contain;
-webkit-transform:translate3d(-50px,0,0);
-webkit-transition:-webkit-transform 1s ease 2s;}

.Map-Menu-Item {position:absolute;top:0;left:0;right:0;bottom:0;height:400px;width:400px;margin:-200px 0 0 200px;overflow:hidden;pointer-events:none;
background:#222;
border:2px solid rgba(204,204,204,0.1);border-left:3px solid rgba(204,204,204,.1);
box-sizing:border-box;outline:1px solid #282828;
-webkit-transform-origin:0 100%;
-webkit-transform:translate3d(0,0,0) rotate(17deg) skew(-55deg);
-webkit-transition:-webkit-transform 2s ease,background .5s ease,border-color .5s ease;}

.Map-Menu-Item:before,.Map-Menu-Item:after {content:'';pointer-events:none;
position:absolute;top:0;left:0;right:0;bottom:0;
border:inherit;box-sizing:border-box;border-radius:50%;
-webkit-transform-origin:50% 50%;
-webkit-transform:translate3d(0,0,0) skew(55deg);
-webkit-transition:inherit;
}
  
.Map-Menu-Item:before {width:320px;height:320px;margin:238px 0 0 -163px;}
.Map-Menu-Item:after  {width:400px;height:400px;margin:199px 0 0 -202px;}

#Map-Menu i:hover .Map-Menu-Item {background:rgba(0,155,255,0.1);border-color:#00E0FC;-webkit-transition:-webkit-transform 2s ease,background .5s ease,border-color .5s ease;}

#Map-Menu i:before {position:absolute;cursor:pointer;pointer-events:none;
background:-webkit-linear-gradient(white,#C0C0C0);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-webkit-transition:margin 2s ease;}

#Map-Menu i:nth-child(-n+2):before {font-size:30px;z-index:21;margin:162px 0 0 382px;}
#Map-Menu i:nth-child(3):before    {font-size:40px;z-index:40;margin:162px 0 0 355px;}

#Map-Menu i:nth-child(-n+2) .Map-Menu-Item{z-index:20;}
#Map-Menu i:nth-child(3)    .Map-Menu-Item{z-index:30;}

#Map-Menu.animate i:nth-child(1):before {margin:50px 0 0 320px;}
#Map-Menu.animate i:nth-child(2):before {margin:285px 0 0 318px;}

#Map-Menu.animate i:nth-child(1) .Map-Menu-Item {-webkit-transform:translate3d(0,0,0) rotate(-19deg) skew(-46deg);}
#Map-Menu.animate i:nth-child(1) .Map-Menu-Item:before {-webkit-transform:translate3d(0,0,0) skew(46deg);}
#Map-Menu.animate i:nth-child(1) .Map-Menu-Item:after  {-webkit-transform:translate3d(0,0,0) skew(46deg);}

#Map-Menu.animate i:nth-child(2) .Map-Menu-Item {-webkit-transform:translate3d(0,0,0) rotate(62deg) skew(-46deg);}
#Map-Menu.animate i:nth-child(2) .Map-Menu-Item:before {-webkit-transform:translate3d(0,0,0)  skew(46deg);}
#Map-Menu.animate i:nth-child(2) .Map-Menu-Item:after {-webkit-transform:translate3d(0,0,0) skew(46deg);}

#Map-Menu.animate {-webkit-transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 1s ease;}
#Map-Menu.animate i:before {pointer-events:auto;-webkit-transition:margin 2s ease 1s;}
#Map-Menu.animate .Map-Menu-Item {-webkit-transition:-webkit-transform 2s ease 1s,background .5s ease,border-color .5s ease;}
#Map-Menu.animate .Map-Menu-Item:before {-webkit-transition:-webkit-transform 2s ease 1s;}
#Map-Menu.animate .Map-Menu-Item:after {-webkit-transition:-webkit-transform 2s ease 1s;}

/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-zjEdPL */
setTimeout(maptools,3000);   
 
function maptools() { 
$('#Map-Menu').addClass('animate');
};   

function CloseMapMenu() { 
$('#Map-Menu').removeClass('animate');
};

Comments