Facebook Like Reaction - Pure CSS Animation

Welcome to EL Creative Academy. In this article, we will discuss about Facebook Like Reaction with Pure HTML and CSS.

Note for Indonesian Visitor:
Artikel ini merupakan bahasan dari salah satu Konten Video di YouTube tentang Facebook Like Reaction - Pure CSS Animation yang menargetkan pengunjung Global, jadi untuk artikel kali ini, kami akan menggunakan bahasa inggris.


In the Source Code you downloaded, there are two files, index.html and style.css.

Here are the contents of index.html:
<!DOCTYPE html>
<html>
<head>
 <title>Facebook Like Reaction</title>
 <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
 <div class="emoji emoji-like">
  <div class="emoji-hand">
   <div class="emoji-thumb"></div>   
  </div>
 </div>
</body>
</html>

Here are the contents of style.css:
body {
 margin: 0;
 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-hand, .emoji-thumb {
 position: absolute;
}

.emoji-hand:before, .emoji-hand:after, .emoji-thumb:before, .emoji-thumb:after {
 position: absolute;
 content: '';
}

.emoji-like {
 background: #548DFF;
}

.emoji-like:after {
 content: '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-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-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-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;
}

/* Keyframes Animation */

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

The results will like this:



If you are confused with the code above, you can see our video below:

0Komentar

Sebelumnya Selanjutnya