Christmas Mug

HTML
<div class="mug serve"> <ul class="xmas"> <li class="xmas__01 tree serve"></li> <li class="xmas__02 tree serve"></li> <li class="xmas__03 tree serve"></li> <li class="xmas__04 tree serve"></li> </ul> <div class="mug__bottom"></div> </div>
SCSS
@charset "UTF-8"; html { height: 100%; width: 100%; } body { background-color: #e85a71; overflow: hidden; } .mug { width: 260px; height: 160px; background-color: #FFEEE4; border-bottom-left-radius: 260px; border-bottom-right-radius: 260px; margin-top: -80px; margin-left: -147px; position: absolute; top: 60%; left: 50%; } .mug:before { animation-name: blend; animation-duration: 3.2s; animation-timing-function: linear; animation-delay: 1.5s; animation-iteration-count: infinite; color: #e85a71; content: '≈'; font-family: "Times New Roman", Times, serif; font-size: 136px; font-weight: bold; line-height: 0; position: absolute; top: 34px; left: 37%; transform: rotate(100deg); z-index: -1; } .mug:after { width: 34px; height: 34px; content: ''; border: 25.5px solid #FFEEE4; border-radius: 50%; position: absolute; top: 0; right: -42.5px; } .mug__bottom { width: 86.66667px; height: 13px; background-color: #FFEEE4; border-radius: 40%; margin-left: -43.33333px; position: absolute; bottom: 0; left: 50%; } .tree { width: 0; height: 0; border-style: solid; border-top-width: 0; border-color: transparent transparent #e85a71 transparent; position: absolute; left: 50%; } .xmas { list-style-type: none; } .xmas__01 { border-right-width: 17px; border-bottom-width: 17px; border-left-width: 17px; margin-left: -17px; border-bottom-color: #41D3BD; top: 34px; z-index: 3; } .xmas__02 { border-right-width: 25.5px; border-bottom-width: 25.5px; border-left-width: 25.5px; margin-left: -25.5px; border-bottom-color: #2EC4B6; top: 42.5px; z-index: 2; } .xmas__03 { border-right-width: 34px; border-bottom-width: 34px; border-left-width: 34px; margin-left: -34px; border-bottom-color: #4eb2b3; top: 51px; z-index: 1; } .xmas__04 { border-right-width: 42.5px; border-bottom-width: 42.5px; border-left-width: 42.5px; margin-left: -42.5px; border-bottom-color: #519fa0; top: 59.5px; z-index: 0; } .serve { animation-name: serve; animation-duration: 1s; animation-timing-function: linear; animation-direction: reverse; animation-fill-mode: forwards; } @keyframes blend { 40%, 50% { color: #FADAD8; } 80%, 100% { font-size: 85px; transform: rotate(115deg); left: 44%; } 90%, 100% { color: #e85a71; } 100% { margin-top: -204px; } } @keyframes serve { 100% { top: 150%; } }
JAVASCRIPT
Expand for more options Login