Animated emoji reactions using HTML nd CSS only

Animated emoji reactions using HTML nd CSS only

ยท

7 min read

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.

new1.png

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 extesnsion for busy developers.


Thanks for reading if you find the tutorial helpful please comment, react and subscribe.

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!