"pencil gratitude"
Bootstrap 4.1.1 Snippet by koshikojha

<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); } }

Related: See More


Questions / Comments: