body {
margin: 0;
background-color: hsl(330, 100%, 2%);
width: 100%;
height: 100%;
}
.name {
color: rgb(199, 199, 199);
text-align: center;
font-size: 20px;
font-family: monospace;
animation: name 0.2s ease 1.3s forwards, a 3s linear 2s infinite;
opacity: 0;
}
@keyframes name {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.name-container {
animation: nameReveal 0.2s ease forwards 1s;
padding: 0px 10px;
margin-top: 30px;
}
@keyframes nameReveal {
0% {
background-color: rgba(5, 231, 151, 0);
}
30% {
background-color: hsl(330, 100%, 68%);
box-shadow: 0px 0px 7px 2px hsl(330, 100%, 68%);
transform: skewX(60deg);
}
50% {
background-color: rgba(5, 231, 151, 0);
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0);
transform: skewX(0deg);
}
70% {
background-color: hsl(330, 100%, 68%);
box-shadow: 0px 0px 7px 2px hsl(330, 100%, 68%);
}
100% {
background-color: rgba(5, 231, 151, 0);
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0);
}
}
.top-animation {
display: inline-block;
width: 100%;
}
.top-animation-table {
margin: 0 auto;
border-spacing: 10px;
border-collapse: separate;
width: 100%;
max-width: 400px;
}
.top-animation-table .pixel:nth-child(4) {
animation-delay: 1.2s;
}
.top-animation-table .pixel:nth-child(5) {
animation-delay: 1.1s;
}
.top-animation-table .pixel:nth-child(6) {
animation-delay: 1s;
}
.top-animation-table .pixel:nth-child(7) {
animation-delay: 0.9s;
}
.top-animation-table .pixel:nth-child(8) {
animation-delay: 0.8s;
}
.top-animation-table .pixel:nth-child(9) {
animation-delay: 0.7s;
}
.top-animation-table .pixel:nth-child(10) {
animation-delay: 0.6s;
}
.top-animation-table .pixel:nth-child(11) {
animation-delay: 0.5s;
}
.top-animation-table .pixel:nth-child(12) {
animation-delay: 1.7s;
}
.top-animation-table .pixel:nth-child(13) {
animation-delay: 1.6s;
position: relative;
}
.top-animation-table .pixel:nth-child(13):after {
content: "";
position: absolute;
width: 100%;
height: 10px;
top: 18px;
left: 0px;
animation: top-animation 1s linear forwards 1.6s;
}
.top-animation-table .pixel:nth-child(3):after {
content: "";
position: absolute;
width: 100%;
height: 10px;
top: 18px;
left: 0px;
animation: top-animation 1s linear forwards;
}
.top-animation-table .pixel {
animation: top-animation 1s linear forwards;
}
.top-animation-table .pixel:nth-child(1) {
animation-delay: 0.2s;
}
.top-animation-table .pixel:nth-child(2) {
animation-delay: 0.1s;
}
.top-animation-table .pixel:nth-child(14) {
animation-delay: 1.5s;
}
.pixel {
width: 7%;
height: 10px;
}
.top-animation-table .pixel:nth-child(3) {
position: relative;
}
@keyframes top-animation {
0% {
background-color: rgba(5, 231, 151, 0);
}
50% {
background-color: hsl(330, 100%, 68%);
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0.2);
}
100% {
background-color: rgba(5, 231, 151, 0);
box-shadow: 0px 0px 10px 5px rgba(5, 231, 151, 0);
}
}
.left-animation {
width: 30%;
margin-top: 10%;
display: inline-block;
vertical-align: top;
position: relative;
}
.left-animation-cont {
display: inline-block;
width: 40%;
margin-right: 10%;
vertical-align: middle;
}
.hourglass-container {
display: inline-block;
width: 50%;
position: relative;
vertical-align: middle;
}
.hourglass1 {
width: 100%;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
stroke-width: 4;
animation: dash 1.8s linear forwards 0.5s;
}
.hourglass {
fill: rgba(0, 0, 0, 0);
stroke: hsl(330, 100%, 68%);
stroke-miterlimit: 10;
}
@keyframes dash {
10% {
opacity: 1;
}
11% {
opacity: 0;
}
12% {
opacity: 1;
}
30% {
opacity: 1;
}
41% {
opacity: 0;
transform: skew(0deg);
}
42% {
opacity: 1;
transform: skew(10deg);
}
43% {
opacity: 1;
transform: skew(0deg);
}
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
.hourglass-container:after {
content: "";
height: 20px;
width: 20px;
border: 2px solid hsl(330, 100%, 68%);
margin-left: 10px;
opacity: 0;
position: absolute;
left: -15px;
top: -5px;
animation: appear 0.5s ease 1s;
}
@keyframes appear {
0% {
opacity: 0;
}
50% {
opacity: 1;
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0.2);
}
100% {
opacity: 0;
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0);
}
}
.lines {
position: absolute;
height: 50px;
width: 70px;
top: 80px;
left: 100px;
}
.lines .line {
width: 0px;
height: 3px;
background-color: hsl(330, 100%, 68%);
margin-bottom: 20px;
position: relative;
}
.lines .line:nth-child(1) {
animation: linesAppear 0.7s ease 1.9s;
}
.lines .line:nth-child(2) {
animation: linesAppear 0.7s ease 2.1s;
}
.lines .line:nth-child(3) {
animation: linesAppear 0.7s ease 2.3s;
}
.right-animation {
width: 30%;
display: inline-block;
vertical-align: top;
right: 0;
transform: scaleX(-1);
margin-top: 10%;
}
@keyframes linesAppear {
0% {
width: 0px;
height: 3px;
opacity: 0;
}
50% {
width: 100%;
height: 3px;
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0.2);
opacity: 1;
}
80% {
width: 100%;
height: 3px;
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0.2);
opacity: 1;
}
100% {
width: 100%;
height: 3px;
box-shadow: 0px 0px 7px 2px rgba(5, 231, 151, 0.2);
opacity: 0;
}
}
.zoom {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: scale(0.9);
animation: zoom 10s ease forwards;
}
.mid {
display: flex;
justify-content: center;
align-items: center;
}
@keyframes zoom {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes flick {
0% {
opacity: 1;
}
3% {
opacity: 0;
transform: skew(-35deg);
}
5% {
opacity: 1;
transform: skew(0deg);
}
100% {
opacity: 1;
}
}
@keyframes a {
0% {
opacity: 1;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
49.5% {
transform: skewX(0deg);
}
50% {
transform: skewX(50deg);
}
50.5% {
transform: skewX(0deg);
}
100% {
opacity: 1;
transform: skewX(0deg);
}
}
.avatar {
width: 200px;
height: 300px;
margin: auto;
position: relative;
display: inline-block;
animation: flick 1s ease 1s, a 3s linear 1s infinite;
top: 0;
}
.hairBase {
width: 180px;
height: 330px;
margin: auto;
position: relative;
top: 50px;
background-color: hsl(330, 100%, 23%);
border-top-left-radius: 200px;
border-top-right-radius: 200px;
}
.bang {
position: absolute;
width: 100px;
height: 70px;
background-color: hsl(330, 100%, 23%);
box-shadow: inset 3px -10px hsl(330, 100%, 30%);
top: -10px;
}
/* .bang.left {
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
right: 40px;
transform: rotate(-25deg);
} */
.bang.right {
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
left: 40px;
}
.head {
width: 130px;
height: 180px;
margin: auto;
background-color: hsl(330, 57%, 56%);
border-radius: 200px;
position: relative;
top: 30px;
z-index: 2;
}
.hair {
list-style: none;
padding: 0;
}
.neck {
position: relative;
width: 50px;
height: 50px;
background-color: hsl(330, 57%, 56%);
margin: auto;
top: -65px;
box-shadow: inset 0px 10px hsl(330, 77%, 44%);
}
.turtle-neck {
position: relative;
width: 150px;
height: 60px;
background-color: hsl(330, 100%, 30%);
margin: auto;
top: -100px;
border-radius: 100px;
z-index: 2;
}
.body {
position: relative;
width: 150px;
height: 100px;
background-color: hsl(330, 100%, 26%);
margin: auto;
top: -150px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}