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.
Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.
Let's Head on to that 😎🤘
The final result will look like this.
Yea obviously moving.
- 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>
- 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
classesis used and how are all theclassare uses.
Get the daily.dev extension for busy developers.
Thanks for reading if you find the tutorial helpful please comment, react and subscribe.
Top comments (0)