@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');
$num_clones:20;
$black:#171717;
$white:#fbfbfb;
$shadow:#7c7c7c;
$background:#ebebeb;
body{
font-family: 'Rubik Mono One', sans-serif;
background-color: darken($background,20%);
}
.container{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
.make3D{
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg);
//transform:translate(-50%,-50%) rotateX(40deg);
transform-style:preserve-3d;
animation:rotate 5s ease infinite;
.text{
display:inline-block;
text-align:center;
font-size:10rem;
text-shadow:0px 0px 1px rgba(0,0,0,0.5);
&:not(:first-child){
position:absolute;
top:0;
left:0%;
right:0%;
margin:auto;
transform-style:preserve-3d;
color:$white;
text-shadow:0px 0px 20px rgba($shadow,0.4);
}
&:first-child{
color:$black;
}
&:last-child{
text-shadow:2px 2px 10px 10px red;
}
}
@for $i from 1 through $num_clones+1{
.text:nth-child(#{$i}){
z-index:#{-$i};
transform:translate3d(0,0,#{-$i}px);
}
}
}
/********************************/
.pens_link {
--pens-link-color:#ffffff;
--pens-link-bgColor:#212121;
position: fixed;
bottom: 56px;
right: 56px;
margin: auto;
display: inline-flex;
font-size: 2rem;
text-decoration: none;
border-radius: 500px;
background-color:var(--pens-link-bgColor);
color: var(--pens-link-color);
border:4px solid #ffffff;
height: 56px;
width: 56px;
justify-content: center;
align-items: center;
overflow: hidden;
animation: animate 1500ms ease infinite;
z-index:999999;
&:hover{
text-decoration:none;
color:var(--pens-link-color);
}
@keyframes animate {
0%,
100% {
transform: translatey(-10%);
}
50% {
transform: translatey(10%);
}
}
}
/*******************************/
View Compiled