HTML
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Noto+Serif:400,400i,700,700i|Yanone+Kaffeesatz:200,300,400,700" rel="stylesheet">
<div class="overlay">
<div class="years">
<i>1960-е</i>
<i>1970-е</i>
<i>1980-е</i>
<i>1990-е</i>
<i>2000-е</i>
<i>2010-е</i>
</div>
<div class="pee">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.434 49.971c.956-1.58 1.639-3.215 2.045-4.908.404-1.693.818-4.024 1.241-6.994l3.262-23.711h-5.355c-2.595 0-4.64.772-6.131 2.317s-2.449 3.538-2.872 5.982l-4.575-.567C1.017 21.791 1 21.359 1 20.795c0-2.794.673-5.281 2.018-7.46 1.347-2.18 3.166-3.866 5.45-5.064 2.29-1.197 4.812-1.796 7.569-1.796h33.338c2.173 0 3.763-.066 4.767-.202 1.008-.136 1.826-.511 2.458-1.127.633-.615 1.094-1.615 1.385-3.003H63c-.324 3.422-.772 5.913-1.338 7.469-.57 1.557-1.817 2.736-3.749 3.541-1.93.803-5.02 1.205-9.269 1.205h-1.801L45.575 47.33c-.096 2.649.229 4.615.976 5.894s1.766 1.918 3.064 1.918c1.752 0 3.294-.449 4.626-1.343 1.329-.898 2.562-2.396 3.696-4.504l3.7 2.544c-1.329 2.985-3.068 5.394-5.207 7.224-2.143 1.828-4.918 2.745-8.322 2.745-3.081 0-5.41-.936-6.983-2.803-1.574-1.869-2.36-4.559-2.36-8.074 0-.417.031-1.101.095-2.063l2.678-34.509H25.43l-2.385 26.05c-.357 3.587-.844 6.471-1.459 8.662-.616 2.188-1.396 3.989-2.336 5.396-.941 1.408-2.223 2.799-3.845 4.18-.94.797-2.004 1.412-3.186 1.845-1.188.433-2.864.89-5.038 1.368l-4.479-4.871c2.466-.573 4.672-1.512 6.618-2.823 1.787-1.219 3.156-2.614 4.114-4.195z"/></svg>
</div>
</div>
CSS
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgb(51, 51, 68);
perspective: 200px;
}
.years {
height: 420px;
width: 420px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin: -210px 0 0 -210px;
animation: 6s Years infinite;
font-family: 'Yanone Kaffeesatz', 'Arial Narrow', 'Helvetica Condensed', sans-serif
}
.years:before {
content: '';
display: block;
position: absolute;
width: 75%;
height: 75%;
border: 1px dashed rgb(117, 167, 170);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
@keyframes Years {
0% {
transform: rotateZ(0deg) rotateY(-15deg)
}
16.66% {
transform: rotateZ(-60deg) rotateY(15deg)
}
33.32% {
transform: rotateZ(-120deg) rotateY(-15deg)
}
49.98% {
transform: rotateZ(-180deg) rotateY(15deg)
}
66.64% {
transform: rotateZ(-240deg) rotateY(-15deg)
}
83.3% {
transform: rotateZ(-300deg) rotateY(15deg)
}
100% {
transform: rotateZ(-360deg) rotateY(-15deg)
}
}
.years i {
height: 100%;
width: 96px;
display: block;
position: absolute;
top: 0;
left: 50%;
background: transparent;
font-size: 32px;
font-style: normal;
color: rgb(117, 167, 170);
font-weight: 300;
margin: 0 0 0 -48px;
text-align: center;
}
.years i:nth-of-type(2) {
transform: rotate(60deg)
}
.years i:nth-of-type(3) {
transform: rotate(120deg)
}
.years i:nth-of-type(4) {
transform: rotate(180deg)
}
.years i:nth-of-type(5) {
transform: rotate(240deg)
}
.years i:nth-of-type(6) {
transform: rotate(300deg)
}
.pee {
position: absolute;
top: 50%;
left: 50%;
width: 160px;
height: 160px;
margin: -80px 0 0 -80px;
animation: 6s PeeLogo infinite;
}
.pee svg path {
animation: 6s Pee infinite;
}
.years i:after {
content: '';
display: block;
width: 1px;
height: 32px;
background-color: rgb(117, 167, 170);
position: absolute;
top: 36px;
left: 50%;
}
@keyframes Pee {
0% {
fill: rgba(117, 170, 1677, 1);
}
16.66% {
fill: rgba(117, 167, 170, 1);
}
33.32% {
fill: rgba(167, 167, 117, 1);
}
49.98% {
fill: rgba(170, 117, 167, 1);
}
66.64% {
fill: rgba(117, 170, 167, 1);
}
83.3% {
fill: rgba(167, 117, 170, 1);
}
100% {
fill: rgba(117, 170, 1677, 1);
}
}
@keyframes PeeLogo {
0% {
transform: rotateY(15deg)
}
16.66% {
transform: rotateX(-15deg)
}
33.32% {
transform: rotateY(-15deg)
}
49.98% {
transform: rotateX(15deg)
}
66.64% {
transform: rotateY(15deg)
}
83.3% {
transform: rotateX(-15deg)
}
100% {
transform: rotateY(15deg)
}
}
