<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="pencil"></div>
<div class="text">
<h class="first">😊 T</h>
<h class="second">H</h>
<h class="third">A</h>
<h class="fourth">N</h>
<h class="fifth">K</h>
<h class="sixth">S! 😊</h>
</div>
html,
body {
width: 100%;
height: 100%;
font-size: 62.5%;
font-family: 'Dancing Script';
display: flex;
justify-content: center;
align-items: center;
background-color: #b2bec3;
}
html .pencil,
body .pencil {
width: 30em;
height: 2.8em;
z-index: 1;
transform: rotate(0deg);
margin-left: 0em;
margin-top: -3em;
position: absolute;
border-radius: 0px 0.3em 0.3em 0px;
box-shadow: 0.5em 0px 0px 0px #fff, 2.5em 0px 0px 0px #2c3e50, 0rem 0px 0.1em 0em #000;
background: linear-gradient(#e55958 0.8em, #e55958 0.8em, #eb9773 calc(100% - 0.8em), #e55958 calc(100% - 0.8em), #eb9773 calc(100% - 0.8em), #e55958 calc(100% - 0.32em));
animation: write ease 6s 1;
}
html .pencil::before,
body .pencil::before {
content: "";
position: relative;
width: 0;
height: 0;
top: 0.8em;
left: -3em;
transform: rotate(-90deg);
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-right: 3em solid #ffbe76;
}
html .pencil::after,
body .pencil::after {
content: "";
position: absolute;
border-radius: 1em;
top: 0.65em;
left: -4.5em;
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-right: 2em solid #2c3e50;
}
html .text,
body .text {
font-size: 5em;
top: 2.3em;
position: relative;
left: -rem;
z-index: 0;
}
html .text h,
body .text h {
visibility: visible;
}
html .text .first,
body .text .first {
animation: showFirstLetter ease 6s 1;
}
html .text .second,
body .text .second {
animation: showSecondLetter ease 6s 1;
}
html .text .third,
body .text .third {
animation: showThirdLetter ease 6s 1;
}
html .text .fourth,
body .text .fourth {
animation: showFourthLetter ease 6s 1;
}
html .text .fifth,
html .text .sixth,
body .text .fifth,
body .text .sixth {
animation: showFifthLetter ease 6s 1;
}
@keyframes showFirstLetter {
0% {
visibility: hidden;
}
25%,
45%,
65%,
85%,
100% {
visibility: visible;
}
}
@keyframes showSecondLetter {
0%,
25% {
visibility: hidden;
}
45%,
65%,
85%,
100% {
visibility: visible;
}
}
@keyframes showThirdLetter {
0%,
25%,
45% {
visibility: hidden;
}
65%,
85%,
100% {
visibility: visible;
}
}
@keyframes showFourthLetter {
0%,
25%,
45%,
65% {
visibility: hidden;
}
85%,
100% {
visibility: visible;
}
}
@keyframes showFifthLetter {
0%,
25%,
45%,
65%,
85% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes write {
0% {
margin-top: -3em;
transform: rotate(-45deg);
}
20% {
margin-left: 3em;
margin-top: -3em;
transform: rotate(-45deg);
}
23% {
margin-top: 1em;
transform: rotate(-45deg);
}
43% {
margin-left: 6em;
margin-top: -3em;
transform: rotate(-45deg);
}
63% {
margin-left: 9rem;
margin-top: 1rem;
transform: rotate(-45deg);
}
83% {
margin-left: 15em;
margin-top: -3em;
transform: rotate(-45deg);
}
98%, 100% {
margin-left: 28em;
transform: rotate(-45deg);
}
}
