Cross Hands Animated Emoji

Developer
Gil
Size
4,107 Kb
Views
4,048
  1. Cross Hands Animated Emoji Previews
  2. Cross Hands Animated Emoji HTML Codes
  3. Cross Hands Animated Emoji CSS Codes

How do I make an cross hands animated emoji?

"face with no good gesture" eye brow animated shake using CSS. What is a cross hands animated emoji? How do you make a cross hands animated emoji? This script and codes were developed by Gil on 12 December 2022, Monday.

Cross Hands Animated Emoji Previews
IQ Test

Cross Hands Animated Emoji - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cross Hands Animated Emoji</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path fill="#ffbc00" d="m32 1.993c-14.488 0-22.398 9.03-22.398 20.924v37.08h44.795v-37.08c0-17.679-12.12-17.35-12.12-17.35s-.913-3.574-10.272-3.574"/><path fill="#ffdd67" d="m15.812 32.886c0 0-3.262-.834-3.262-5.662 0-3.823 2.459-4.479 2.459-4.479 8.811 0 23.17-11.454 23.17-11.454s5.428 10.112 10.664 11.454c0 0 2.537.468 2.537 4.479 0 4.828-3.385 5.662-3.385 5.662-.045 7.283-9.992 16.07-16.03 16.07-6.04 0-16.15-8.785-16.15-16.07"/><path fill="#eba352" d="m36.01 36.21c0 1.587-3.289 2.047-4.04 2.047-.756 0-4.047-.563-4.047-2.149 0-.001 8.09-.69 8.09.102"/><path fill="#f5f5f5" d="m26.456 29.869c.951 0 .824-2.458.824-2.458-2.92-6.522-9.42-2.394-9.42-2.394-2.527 1.128 1.133 4.694 1.719 4.852 2.754.746 6.877 0 6.877 0"/><circle fill="#664e27" cx="22.648" cy="26.883" r="3.108"/><g fill="#231f20"><circle cx="22.647" cy="26.883" r="1"/><path class="brow" d="m28.1 28.352c-.795-.971-1.582-1.904-2.496-2.614-.912-.707-1.938-1.154-3.045-1.223-1.107-.107-2.268.128-3.471.355-.602.117-1.223.232-1.871.269-.627.026-1.385-.047-1.832-.529.592.234 1.174.11 1.738-.06.568-.163 1.131-.396 1.721-.594 1.164-.414 2.451-.754 3.814-.651.676.066 1.354.237 1.969.538.607.313 1.16.714 1.611 1.195.912.954 1.508 2.109 1.862 3.314"/></g><path fill="#f5f5f5" d="m37.474 29.869c-.953 0-.826-2.458-.826-2.458 2.92-6.522 9.422-2.394 9.422-2.394 2.527 1.128-1.133 4.694-1.721 4.852-2.75.746-6.875 0-6.875 0"/><circle fill="#664e27" cx="41.28" cy="26.883" r="3.109"/><g fill="#231f20"><circle cx="41.28" cy="26.883" r="1"/><path d="m35.833 28.352c.354-1.205.947-2.36 1.861-3.313.451-.481 1-.882 1.609-1.195.615-.301 1.295-.472 1.969-.538 1.363-.103 2.65.237 3.814.65.59.198 1.154.432 1.723.595.563.17 1.146.294 1.738.06-.449.482-1.205.556-1.834.529-.648-.036-1.27-.151-1.873-.269-1.199-.228-2.361-.463-3.467-.355-1.105.069-2.133.516-3.045 1.223-.913.71-1.7 1.643-2.495 2.613"/></g><path fill="#b386e2" d="m52.4 61.979c0-15-1.389-15.17-20.4-15.17-19.02 0-20.394.17-20.394 15.17h40.794"/> <g class="hands" fill="#ffd452"> <path id="left-hand" d="m4.222 20.2c.821.649 13.871 11.208 13.871 11.208l-3.201 6.136c-4.308-2.569-6.224-7.232-12.492-14.383-1.16-1.323.437-4.054 1.822-2.961"/> <path id="right-hand" d="m59.777 20.2c-.82.649-13.87 11.208-13.87 11.208l3.2 6.136c4.309-2.57 6.225-7.233 12.492-14.384 1.161-1.322-.436-4.053-1.822-2.96"/> </g> <path fill="#c99ff7" d="m42.807 44.38c4.414-3.543 7.43-6.209 7.43-6.209l-3.484-7.887c-2.978 2.75-8.627 5.667-14.752 8.688-6.125-3.02-11.773-5.938-14.751-8.688l-3.484 7.887c0 0 3.02 2.666 7.429 6.208-10.298 5.427-18.16 11.07-12.09 16.589 3.719 3.385 13.697-2.049 22.892-8.457 9.197 6.408 19.17 11.843 22.895 8.457 6.068-5.524-1.791-11.161-12.09-16.588"/><g fill="#b386e2"><path d="m23.12 58.13l19.687-13.75-14.446 13.599z"/><path d="M21.19 44.38 32 38.973 20.22 43.594z"/></g></svg> <span>Hover Me</span> </a>
</body>
</html>

Cross Hands Animated Emoji - Script Codes CSS Codes

.button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 250px; margin: 100px auto; padding: 20px; text-decoration: none; border: 1px solid rgba(128, 128, 128, 0.3); background-color: rgba(128, 128, 128, 0.1); color: black; border-radius: 5px; -webkit-transition: all .25s; transition: all .25s;
}
.button span { margin-top: 20px; text-transform: uppercase; color: #0e0e0e; font-weight: lighter; font-family: Helvetica; letter-spacing: 3px; font-size: 13px;
}
.button svg { height: 64px; width: 64px; overflow: visible; -webkit-transition: all .5s; transition: all .5s;
}
.button .brow,
.button .hands #left-hand,
.button .hands #right-hand { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: all .5s; transition: all .5s;
}
.button:hover { background-color: rgba(128, 128, 128, 0.15); border: 1px solid rgba(128, 128, 128, 0.5);
}
.button:hover .brow { -webkit-animation: browShake .65s ease 2; animation: browShake .65s ease 2; -webkit-animation-delay: .5s; animation-delay: .5s;
}
.button:hover .hands #right-hand { -webkit-animation: rotateDown .5s ease 4; animation: rotateDown .5s ease 4;
}
.button:hover .hands #left-hand { -webkit-animation: rotateUp .5s ease 4; animation: rotateUp .5s ease 4; -webkit-animation-delay: .1s; animation-delay: .1s;
}
@-webkit-keyframes rotateDown { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(25deg) translate(3px, 1px); transform: rotate(25deg) translate(3px, 1px); } 100% { -webkit-transform: none; transform: none; }
}
@keyframes rotateDown { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(25deg) translate(3px, 1px); transform: rotate(25deg) translate(3px, 1px); } 100% { -webkit-transform: none; transform: none; }
}
@-webkit-keyframes rotateUp { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(-25deg) translate(-3px, 3px); transform: rotate(-25deg) translate(-3px, 3px); } 100% { -webkit-transform: none; transform: none; }
}
@keyframes rotateUp { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(-25deg) translate(-3px, 3px); transform: rotate(-25deg) translate(-3px, 3px); } 100% { -webkit-transform: none; transform: none; }
}
@-webkit-keyframes browShake { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(20deg) translateY(-1px); transform: rotate(20deg) translateY(-1px); } 100% { -webkit-transform: none; transform: none; }
}
@keyframes browShake { 0% { -webkit-transform: none; transform: none; } 50% { -webkit-transform: rotate(20deg) translateY(-1px); transform: rotate(20deg) translateY(-1px); } 100% { -webkit-transform: none; transform: none; }
}
Cross Hands Animated Emoji - Script Codes
Cross Hands Animated Emoji - Script Codes
Home Page Home
Developer Gil
Username gil--
Uploaded December 12, 2022
Rating 3
Size 4,107 Kb
Views 4,048
Do you need developer help for Cross Hands Animated Emoji?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gil (gil--) Script Codes
Name
Mobile Gallery Swipe Directions
A Pen by Gil
CSS Snackables - Week 2
Animated Music Jukebox
SVG CSS Circular Spinner Animation
Animated Like Emoji
Parallax Background
SVG Chat Bubble Animation
Animated Money Emoji with CSS
Dynamic Link Hover Fill Effect
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!