SCSS
@import "compass/css3";
$debug: false;
$dur: 1000ms;
$width: 300px; $height: 100px;
body {
background: #000;
}
.wrapper {
position: absolute;
top: 50%; left: 50%;
width: $width; height: $height;
cursor: pointer;
@include translate(-50%, -50%);
@if $debug {
outline: 1px solid black;
}
&.active {
.left_side,
.right_side {
width: 50%;
}
.left_side,
.left_side .text {
@include transition($dur ease-out);
}
.right_side,
.right_side .text {
@include transition($dur ease-out $dur);
}
}
.left_side,
.left_side .text {
@include transition($dur/2 ease-in-out $dur/2);
}
.right_side,
.right_side .text {
@include transition($dur/2 ease-in-out);
}
.left_side,
.right_side {
position: relative;
width: 0; height: 100%;
float: left;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
.text {
position: absolute;
top: 50%; right: 0;
display: block;
width: $width/2;
padding: 5px;
font: 24px/20px Amatic SC;
color: #fff;
text-shadow: 3px 3px 5px #fff;
letter-spacing: 2px;
@include box-sizing(border-box);
@include translate(0, -50%);
}
}
.left_side {
border-right: 1px solid #fff;
text-align: right;
.text {
left: 0; right: auto;
}
}
}
@import "compass";
*, *::after, *::before{
@include box-sizing(border-box);
}
html{
background: #000;
font-family: Amatic SC;
}
head{
display: block;
position: relative;
width: 200px;
margin: 10% auto 0;
@include animation(shvr .2s infinite);
&::after{
content: '';
width: 20px;
height: 20px;
background: #000;
position: absolute;
top: 30px;
left: 25px;
@include border-radius(50%);
@include box-shadow(125px 0 0 #000);
@include animation(eye 2.5s infinite)
}
}
meta{
position: relative;
display: inline-block;
background: #fff;
width: 75px;
height: 80px;
@include border-radius(50% 50% 50% 50% / 45px 45px 45% 45%);
@include rotate(45deg);
&::after{
content: '';
position: absolute;
border-bottom: 2px solid #fff;
width: 70px;
height: 50px;
left:0px;
bottom: -10px;
@include border-radius(50%);
}
&::before{
bottom: auto;
top: -100px;
@include rotate(45deg);
left: 0;
}
&:nth-of-type(2){
float: right;
@include rotate(-45deg);
&::after{ left:5px; }
}
&:nth-of-type(3){
display: none;
}
}
body{
margin-top: 100px;
text-align: center;
color: #fff;
&::before{
content:'<w>';
text-shadow: 3px 3px 5px #fff;
font-size: 80px;
font-weight: 800;
display: block;
margin-bottom: 10px;
}
&::after{
content: '';
color: #fff;
width: 120px;
font-size: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
}
@include keyframes(eye){
0% ,30% , 55%, 90% , 100%{ @include translate(0 , 0) }
10%, 25%{ @include translate( 0 , 20px) }
65%{ @include translate(-20px, 0) }
80%{ @include translate(20px, 0) }
}
@include keyframes(shvr){
0%{ @include translate(1px) }
50%{ @include translate(0) }
100%{ @include translate(-1px) }
}
@include keyframes(text-show){
to{text-indent: -373px;}
}
