<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vulchivijay/pen/BojMeM?depth=everything&order=popularity&page=79&q=mobile&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: auto;
min-height: 100%;
}
body {
background-color: #f5f5f5;
color: #333;
font-family: "Open Sans", arial, sans-serif;
font-size: 18px;
font-weight: 300;
}
body {
background: -webkit-linear-gradient(45deg, #1aff9f 0%, rgba(26, 255, 159, 0) 70%), -webkit-linear-gradient(315deg, #0657f9 10%, rgba(6, 87, 249, 0) 80%), -webkit-linear-gradient(225deg, #f20d0d 10%, rgba(242, 13, 13, 0) 80%), -webkit-linear-gradient(135deg, #f9971f 100%, rgba(249, 151, 31, 0) 70%);
background: linear-gradient(45deg, #1aff9f 0%, rgba(26, 255, 159, 0) 70%), linear-gradient(135deg, #0657f9 10%, rgba(6, 87, 249, 0) 80%), linear-gradient(225deg, #f20d0d 10%, rgba(242, 13, 13, 0) 80%), linear-gradient(315deg, #f9971f 100%, rgba(249, 151, 31, 0) 70%);
}
.blockCircle {
border: 16px solid #000;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
border-radius: 16px;
background-color: #fff;
margin: 0 auto;
max-width: 320px;
height: 480px;
position: relative;
transform: translateY(30px);
}
.blockCircle:hover .author {
color: #666;
}
.circle {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
display: block;
height: 40px;
margin-bottom: 2px;
width: 40px;
position: relative;
transition: width 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
width: 0;
overflow: hidden;
}
.circle span {
text-transform: uppercase;
color: #fff;
padding-left: 10px;
line-height: 40px;
}
.circle.cir1 {
background-color: #2980b9;
transition-delay: 3s;
}
.circle.cir2 {
background-color: #16a085;
transition-delay: 2.5s;
}
.circle.cir3 {
background-color: #27ae60;
transition-delay: 2s;
}
.circle.cir4 {
background-color: #8e44ad;
transition-delay: 1.5s;
}
.circle.cir5 {
background-color: #2c3e50;
transition-delay: 1s;
}
.circle.cir6 {
background-color: #f39c12;
transition-delay: .5s;
}
.circle.cir7 {
background-color: #c0392b;
}
.animate .circle {
transition: width 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
width: 100%;
}
.animate .circle.cir2 {
transition-delay: .5s;
}
.animate .circle.cir3 {
transition-delay: 1s;
}
.animate .circle.cir4 {
transition-delay: 1.5s;
}
.animate .circle.cir5 {
transition-delay: 2s;
}
.animate .circle.cir6 {
transition-delay: 2.5s;
}
.animate .circle.cir7 {
transition-delay: 3s;
}
.btn {
display: block;
margin: 8px;
width: 40px;
}
.btn span {
background-color: #000;
display: inline-block;
height: 3px;
position: relative;
width: 100%;
transform: translateY(-5px);
}
.btn span:after,
.btn span:before {
content: '';
height: 3px;
background-color: #000;
position: absolute;
z-index: 99;
width: 40px;
left: 0;
}
.btn span:after {
top: -8px;
}
.btn span:before {
bottom: -8px;
}
.author {
color: #eee;
position: absolute;
bottom: 10px;
right: 10px;
text-decoration: none;
text-transform: uppercase;
}
</style></head><body>
<div class="blockCircle">
<a href="#" id="btn" class="btn">
<span></span>
</a>
<a class="circle cir1"><span>home</span></a>
<a class="circle cir2"><span>about</span></a>
<a class="circle cir3"><span>prodcuts</span></a>
<a class="circle cir4"><span>services</span></a>
<a class="circle cir5"><span>news</span></a>
<a class="circle cir6"><span>support</span></a>
<a class="circle cir7"><span>contact</span></a>
<a href="https://codepen.io/vulchivijay/" target="_blank" class="author">vj</a>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$("#btn").click(function() {
$(".blockCircle").toggleClass('animate');
});
//# sourceURL=pen.js
</script>
</body></html>
