RAHULISM

Animated emoji reactions using HTML nd CSS only

October 23, 2020

Hey, there this is my latest blog post after a few days. I'm kinda busy doing some projects and also doing WFH internship. So in this latest post, I am gonna make emojis reactions using only HTML and CSS. You may have seen these emojis reactions when liking posts on FB. This post is definitely for beginners.

Let's Head on to that 😎🤘

The final result will look like this.

Yea obviously moving.

  1. Let's see the HTML for this
<body>
<!-- Like Emoji-->
	<div class="emoji emoji--like">
		<div class="emoji__hand">
			<div class="emoji__thumb">
			</div>
		</div>
	</div>
<!-- Love  Emoji--> 
	<div class="emoji emoji--love">
		<div class="emoji__heart">
		</div>
	</div>
<!-- WOW Emoji--> 
	<div class="emoji emoji--wow">
		<div class="emoji__face">
			<div
				class="emoji__eyebrows">
			</div>
			<div class="emoji__eyes">
			</div>
			<div class="emoji__mouth">
			</div>
		</div>
	</div>
</body>
  1. Here's is the CSS for this
body {
    margin: 0;
    margin-top: 100px;
    width: 1200px;
    max-width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.emoji {
    width: 120px;
    height: 120px;
    margin: 15px 15px 40px;
    background: #FFDA6A;
    display: inline-block;
    border-radius: 50%;
    position: relative;
}
.emoji:after {
    position: absolute;
    bottom: -40px;
    font-size: 18px;
    width: 60px;
    left: calc(50% - 30px);
    color: #8A8A8A;
}
.emoji__face,
.emoji__eyebrows,
.emoji__eyes,
.emoji__mouth,
.emoji__heart,
.emoji__hand,
.emoji__thumb {
    position: absolute;
}
.emoji__face:before,
.emoji__face:after,
.emoji__eyebrows:before,
.emoji__eyebrows:after,
.emoji__eyes:before,
.emoji__eyes:after,
.emoji__mouth:before,
.emoji__mouth:after,
.emoji__tongue:after,
.emoji__heart:before,
.emoji__heart:after,
.emoji__hand:before,
.emoji__hand:after,
.emoji__thumb:before,
.emoji__thumb:after {
    position: absolute;
    content: '';
}
.emoji__face {
    width: inherit;
    height: inherit;
}
.emoji--like {
    background: #548DFF;
}
.emoji--like:after {
    content: 'Like';
}
.emoji--like .emoji__hand {
    left: 25px;
    bottom: 30px;
    width: 20px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 5px;
    z-index: 0;
    animation: hands-up 2s linear infinite;
}
.emoji--like .emoji__hand:before {
    left: 25px;
    bottom: 5px;
    width: 40px;
    background: inherit;
    height: 10px;
    border-radius: 2px 10px 10px 2px;
    box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;
}
.emoji--like .emoji__thumb {
    border-bottom: 20px solid #FFFFFF;
    border-left: 20px solid transparent;
    top: -25px;
    right: -25px;
    z-index: 2;
    transform: rotate(5deg);
    transform-origin: 0% 100%;
    animation: thumbs-up 2s linear infinite;
}
.emoji--like .emoji__thumb:before {
    border-radius: 50% 50% 0 0;
    background: #FFFFFF;
    width: 10px;
    height: 12px;
    left: -10px;
    top: -8px;
    transform: rotate(-15deg);
    transform-origin: 100% 100%;
    box-shadow: -1px 4px 0 -1px #FFFFFF;
}
.emoji--love {
    background: #F55064;
}
.emoji--love:after {
    content: 'Love';
}
.emoji--love .emoji__heart {
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    width: 80px;
    height: 80px;
    animation: heart-beat 1s linear infinite alternate;
}
.emoji--love .emoji__heart:before,
.emoji--love .emoji__heart:after {
    left: calc(50% - 20px);
    top: calc(50% - 32px);
    width: 40px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
}
.emoji--love .emoji__heart:before {
    transform: translate(20px) rotate(-45deg);
    transform-origin: 0 100%;
}
.emoji--love .emoji__heart:after {
    transform: translate(-20px) rotate(45deg);
    transform-origin: 100% 100%;
}
.emoji--wow:after {
    content: 'Wow';
}
.emoji--wow .emoji__face {
    animation: wow-face 3s linear infinite;
}
.emoji--wow .emoji__eyebrows {
    left: calc(50% - 3px);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: transparent;
    box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000;
    animation: wow-brow 3s linear infinite;
}
.emoji--wow .emoji__eyebrows:before,
.emoji--wow .emoji__eyebrows:after {
    width: 24px;
    height: 20px;
    border: 6px solid #000000;
    box-sizing: border-box;
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    top: -3px;
    left: calc(50% - 12px);
}
.emoji--wow .emoji__eyebrows:before {
    margin-left: -25px;
}
.emoji--wow .emoji__eyebrows:after {
    margin-left: 25px;
}
.emoji--wow .emoji__eyes {
    width: 16px;
    height: 24px;
    left: calc(50% - 8px);
    top: 35px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
}
.emoji--wow .emoji__mouth {
    width: 30px;
    height: 45px;
    left: calc(50% - 15px);
    top: 50%;
    border-radius: 50%;
    background: #000000;
    animation: wow-mouth 3s linear infinite;
}
@keyframes heart-beat {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.6);
    }
}
@keyframes wow-face {
    15%,
    25% {
        transform: rotate(20deg) translateX(-25px);
    }
    45%,
    65% {
        transform: rotate(-20deg) translateX(25px);
    }
    75%,
    100% {
        transform: rotate(0deg) translateX(0);
    }
}
@keyframes wow-brow {
    15%,
    65% {
        top: 25px;
    }
    75%,
    100%,
    0% {
        top: 15px;
    }
}
@keyframes wow-mouth {
    10%,
    30% {
        width: 20px;
        height: 20px;
        left: calc(50% - 10px);
    }
    50%,
    70% {
        width: 30px;
        height: 40px;
        left: calc(50% - 15px);
    }
    75%,
    100% {
        height: 50px;
    }
}
@keyframes hands-up {
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg) translateY(-10px);
    }
    75%,
    100% {
        transform: rotate(0deg);
    }
}
@keyframes thumbs-up {
    25% {
        transform: rotate(20deg);
    }
    50%,
    100% {
        transform: rotate(5deg);
    }
}

CONCLUSION

-> This was just a simple tutorial and useful for beginners so that they can learn about

  • How to use class
  • How to add small animation in CSS

Try the wow emoji it would be a bit difficult for beginners as there are many shapes and animation of all at once, I've used the shortcut.

Don't just copy-paste the code, see how it's working. What all classes is used and how are all the class are uses.

Get the [daily.dev](https://api.daily.dev/get?r=rahxuls) extesnsion for busy developers.
Thanks for reading if you find the tutorial helpful please comment, react and subscribe.

© 2020 RAHULISM • Developed with ❤️ and 🍕 by RAHUL