<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<link href="default.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
</head>
<body>
<svg class="goo-filter" viewbox="0 0 1 1">
<filter id="goo">
<feGaussianBlur in="SourceGrapgic" stdDeviation="12" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 48 -24" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</svg>
<footer>
<nav data-chosen="1">
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
<a href="javascript: void(0)"></a>
</nav>
</footer>
<script src="default.js"></script>
</body>
</html>
* {
box-sizing: inherit;
font: inherit;
}
html {
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
html body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #234;
display: flex;
justify-content: center;
align-items: center;
}
p {
display: block;
position: absolute;
transform: translateY(60px);
color: rgba(255, 255, 255, 0.25);
}
footer {
background-color: #cdf;
padding: 20px;
border-radius: 100px;
}
footer nav {
counter-reset: dots;
display: flex;
filter: url(#goo);
font-size: 1.25rem;
}
footer nav[data-chosen="1"]::before {
transform: translateX(0rem);
transition-duration: 1s;
}
footer nav[data-chosen="1"] a:nth-child(1) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="2"]::before {
transform: translateX(4rem);
transition-duration: 1s;
}
footer nav[data-chosen="2"] a:nth-child(2) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="3"]::before {
transform: translateX(8rem);
transition-duration: 1s;
}
footer nav[data-chosen="3"] a:nth-child(3) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="4"]::before {
transform: translateX(12rem);
transition-duration: 1s;
}
footer nav[data-chosen="4"] a:nth-child(4) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="5"]::before {
transform: translateX(16rem);
transition-duration: 1s;
}
footer nav[data-chosen="5"] a:nth-child(5) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="6"]::before {
transform: translateX(20rem);
transition-duration: 1s;
}
footer nav[data-chosen="6"] a:nth-child(6) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="7"]::before {
transform: translateX(24rem);
transition-duration: 1s;
}
footer nav[data-chosen="7"] a:nth-child(7) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="8"]::before {
transform: translateX(28rem);
transition-duration: 1s;
}
footer nav[data-chosen="8"] a:nth-child(8) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="9"]::before {
transform: translateX(32rem);
transition-duration: 1s;
}
footer nav[data-chosen="9"] a:nth-child(9) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav[data-chosen="10"]::before {
transform: translateX(36rem);
transition-duration: 1s;
}
footer nav[data-chosen="10"] a:nth-child(10) {
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
transform: scale(1.5);
transition-duration: 1s;
}
footer nav a, footer nav::before {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
border-radius: 4rem;
background-color: #569;
color: white;
transition: transform 0.8s;
}
footer nav::before {
content: '';
position: absolute;
transition-timing-function: cubic-bezier(0.8, -0.22, 0.3, 1.24);
}
footer nav a {
counter-increment: dots;
transition-timing-function: cubic-bezier(1, 0, 0.7, 1.29);
}
footer nav a, footer nav a:link, footer nav a:visited {
text-decoration: none;
}
footer nav a:hover {
transition-timing-function: ease-out;
transition-duration: 0.5s;
transform: scale(1.25);
}
footer nav a::after {
content: counter(dots);
}
[...document.querySelectorAll('nav a')].map(e=>{
e.addEventListener('click', ()=>{
let index = [...e.parentElement.children].indexOf(e);
e.parentElement.setAttribute('data-chosen', index + 1);
})
});
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
document.body.insertAdjacentHTML('beforeend', '*My not work on safari.');
}