Suspecting Minion

Developer
ZeroSpree
Size
4,555 Kb
Views
107,272
  1. Suspecting Minion Previews
  2. Suspecting Minion HTML Codes
  3. Suspecting Minion CSS Codes
  4. Suspecting Minion JS Codes

How do I make an suspecting minion?

An animated CSS3 Minion suspecting there's something going 'banana'. Based on http://dribbble.com/shots/1142817-Minion-Icon. What is a suspecting minion? How do you make a suspecting minion? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.

Suspecting Minion Previews
IQ Test

Suspecting Minion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Suspecting Minion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html{width:100%;height:100%;margin:0;}
body{background-color:#86CDEE;overflow:hidden}
.minion{width:488px;height:488px;box-shadow:1px 1px 3px 0px rgba(0,0,0, .5);border-radius:111px;
position:absolute;top:50%;left:50%;margin-top:-225px;margin-left:-244px;}
.minion::before{content: '';position:absolute;width:488px;height:595px;left:172px;top:117px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
background:linear-gradient(to right, rgba(0,0,0, .15), rgba(0,0,0, .0));
background:-webkit-linear-gradient(left, rgba(0,0,0, .15), rgba(0,0,0, .0));}
.hair,.hair1,.hair2,.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{position:absolute;bottom:0;}
.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{content:''}
.hair{left:138px;bottom:auto;top:26px;z-index:1}
.hair::before{left:10px;width:92px;height:52px;border-radius:0px 60px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair::after{left:106px;width:60px;height:103px;border-radius:69px 0 0px 0;box-shadow:inset 6px 0px 0 -4px #000}
.hair1{left:15px;width:91px;height:81px;border-radius:0px 70px 0 0;box-shadow:inset -6px 0px 0 -5px #000}
.hair1::before{left:27px;width:63px;height:96px;border-radius:0px 70px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair1::after{left:18px;width:70px;height:82px;border-radius:0px 100px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair2, .hair2::before, .hair2::after{width:100px;border-radius:200px 0 0 0;box-shadow:inset 6px 0 0 -4px #000}
.hair2{left:108px;height:98px}
.hair2::before{left:0;height:117px}
.hair2::after{left:0;height:63px}
.body{width:488px;height:488px;background:#DFC047;border-radius:111px;z-index:0;top:0;position:absolute;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(252,255,255, .3);}
.body::before{content:'';width:187px;height:111px;border-radius:100%;position:absolute;left:153px;top:294px;
box-shadow:0 -15px 0 -12px #000;
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-ms-transform:rotate(4deg);}
.body::after{content:'';width:120%;height:319px;border-radius:64%;position:absolute;bottom:-196px;left:-10%;background:#5482AA;}
.monocle{width:202px;height:202px;position:absolute;top:47px;left:143px;border-radius:100%;
background:linear-gradient(to bottom right, #A3A29F, #828282);
background:-webkit-linear-gradient(top left, #A3A29F, #828282);}
.monocle::before,
.monocle::after{content:'';z-index:-1;position:absolute;display:block;height:0;width:30px;top:31px;
border-bottom:144px solid #2A2A2A;border-left:5px solid transparent;border-right:5px solid transparent;left:-91px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);}
.monocle::after{left:auto;right:-91px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);}
.eye{width:160px;height:160px;background:#F3DE90;overflow:hidden;position:absolute;left:21px;top:21px;border-radius:100%}
.eye::before{content:'';width:160px;height:137px;border-radius:100%;background:#F3F0E7;position:absolute;top:7px;
animation:closeEye 10s infinite linear;
-webkit-animation:closeEye 10s infinite linear}
.eye::after{content:'';width:46px;height:46px;background:#624123;border-radius:100%;position:absolute;top:70px;left:61px;
animation:moveEye 10s infinite linear;
-webkit-animation:moveEye 10s infinite linear}
.banana{width:200px;height:200px;background:#FDBC1A;border-radius:100%;box-shadow: inset -16px 0 0 #E9AE22;position:absolute;
top:-200px;left:40px;
transform:rotate(21deg);
-webkit-transform:rotate(21deg);
-ms-transform:rotate(21deg);
animation:hideBanana 10s infinite linear;
-webkit-animation:hideBanana 10s infinite linear;}
.banana::before{content: '';width:400px;height:400px;border-radius:100%;position:relative;top:-152px;left:-243px;display:block;
background:#86CDEE;box-shadow:0 -5px 0 0px #968153}
.banana::after{content: '';display:block;width:15px;height:14px;border-radius:0;background:#7C6229;position:absolute;top:14px;
left:149px;box-shadow: inset 6px 0 0 0 rgba(255,255,255, .2);
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);}
/*Eyelid Animation*/
@-webkit-keyframes closeEye{	0% {height:137px;top:7px;}	20%{height:60px;top:60px;}	39%{height:60px;top:60px;}	40%{height:137px;top:7px;}
}
@keyframes closeEye{	0% {height:137px;top:7px;}	20%{height:60px;top:60px;}	39%{height:60px;top:60px;}	40%{height:137px;top:7px;}
}
/*Pupil Animation*/
@-webkit-keyframes moveEye{	39%{top:70px;left:61px;}	40%{top:34px;left:81px;}	50%{top:34px;left:81px;}	51%{top:34px;left:21px;}	60%{top:34px;left:21px;}	61%{top:70px;left:61px;}
}
@keyframes moveEye{	39%{top:70px;left:61px;}	40%{top:34px;left:81px;}	50%{top:34px;left:81px;}	51%{top:34px;left:21px;}	60%{top:34px;left:21px;}	61%{top:70px;left:61px;}
}
/*Do the Banana Dance*/
@-webkit-keyframes hideBanana{	20%{top:-200px;left:40px;margin-left:0px;}	40%{top:20px;left:40px;}	50%{left:40px;margin-left:0px;}	51%{left:100%;margin-left:-240px;}	60%{top:20px;left:100%;margin-left:-240px;}	61%{top:-200px;left:100%;margin-left:-240px;}
}
@keyframes hideBanana{	20%{top:-200px;left:40px;margin-left:0px;}	40%{top:20px;left:40px;}	50%{left:40px;margin-left:0px;}	51%{left:100%;margin-left:-240px;}	60%{top:20px;left:100%;margin-left:-240px;}	61%{top:-200px;left:100%;margin-left:-240px;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="banana"></div>
<div class="minion"> <div class="hair"> <div class="hair1"></div> <div class="hair2"></div> </div> <div class="body"> <div class="monocle"> <div class="eye"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Suspecting Minion - Script Codes CSS Codes

body, html{width:100%;height:100%;margin:0;}
body{background-color:#86CDEE;overflow:hidden}
.minion{width:488px;height:488px;box-shadow:1px 1px 3px 0px rgba(0,0,0, .5);border-radius:111px;
position:absolute;top:50%;left:50%;margin-top:-225px;margin-left:-244px;}
.minion::before{content: '';position:absolute;width:488px;height:595px;left:172px;top:117px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
background:linear-gradient(to right, rgba(0,0,0, .15), rgba(0,0,0, .0));
background:-webkit-linear-gradient(left, rgba(0,0,0, .15), rgba(0,0,0, .0));}
.hair,.hair1,.hair2,.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{position:absolute;bottom:0;}
.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{content:''}
.hair{left:138px;bottom:auto;top:26px;z-index:1}
.hair::before{left:10px;width:92px;height:52px;border-radius:0px 60px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair::after{left:106px;width:60px;height:103px;border-radius:69px 0 0px 0;box-shadow:inset 6px 0px 0 -4px #000}
.hair1{left:15px;width:91px;height:81px;border-radius:0px 70px 0 0;box-shadow:inset -6px 0px 0 -5px #000}
.hair1::before{left:27px;width:63px;height:96px;border-radius:0px 70px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair1::after{left:18px;width:70px;height:82px;border-radius:0px 100px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair2, .hair2::before, .hair2::after{width:100px;border-radius:200px 0 0 0;box-shadow:inset 6px 0 0 -4px #000}
.hair2{left:108px;height:98px}
.hair2::before{left:0;height:117px}
.hair2::after{left:0;height:63px}
.body{width:488px;height:488px;background:#DFC047;border-radius:111px;z-index:0;top:0;position:absolute;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(252,255,255, .3);}
.body::before{content:'';width:187px;height:111px;border-radius:100%;position:absolute;left:153px;top:294px;
box-shadow:0 -15px 0 -12px #000;
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-ms-transform:rotate(4deg);}
.body::after{content:'';width:120%;height:319px;border-radius:64%;position:absolute;bottom:-196px;left:-10%;background:#5482AA;}
.monocle{width:202px;height:202px;position:absolute;top:47px;left:143px;border-radius:100%;
background:linear-gradient(to bottom right, #A3A29F, #828282);
background:-webkit-linear-gradient(top left, #A3A29F, #828282);}
.monocle::before,
.monocle::after{content:'';z-index:-1;position:absolute;display:block;height:0;width:30px;top:31px;
border-bottom:144px solid #2A2A2A;border-left:5px solid transparent;border-right:5px solid transparent;left:-91px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);}
.monocle::after{left:auto;right:-91px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);}
.eye{width:160px;height:160px;background:#F3DE90;overflow:hidden;position:absolute;left:21px;top:21px;border-radius:100%}
.eye::before{content:'';width:160px;height:137px;border-radius:100%;background:#F3F0E7;position:absolute;top:7px;
animation:closeEye 10s infinite linear;
-webkit-animation:closeEye 10s infinite linear}
.eye::after{content:'';width:46px;height:46px;background:#624123;border-radius:100%;position:absolute;top:70px;left:61px;
animation:moveEye 10s infinite linear;
-webkit-animation:moveEye 10s infinite linear}
.banana{width:200px;height:200px;background:#FDBC1A;border-radius:100%;box-shadow: inset -16px 0 0 #E9AE22;position:absolute;
top:-200px;left:40px;
transform:rotate(21deg);
-webkit-transform:rotate(21deg);
-ms-transform:rotate(21deg);
animation:hideBanana 10s infinite linear;
-webkit-animation:hideBanana 10s infinite linear;}
.banana::before{content: '';width:400px;height:400px;border-radius:100%;position:relative;top:-152px;left:-243px;display:block;
background:#86CDEE;box-shadow:0 -5px 0 0px #968153}
.banana::after{content: '';display:block;width:15px;height:14px;border-radius:0;background:#7C6229;position:absolute;top:14px;
left:149px;box-shadow: inset 6px 0 0 0 rgba(255,255,255, .2);
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);}
/*Eyelid Animation*/
@-webkit-keyframes closeEye{	0% {height:137px;top:7px;}	20%{height:60px;top:60px;}	39%{height:60px;top:60px;}	40%{height:137px;top:7px;}
}
@keyframes closeEye{	0% {height:137px;top:7px;}	20%{height:60px;top:60px;}	39%{height:60px;top:60px;}	40%{height:137px;top:7px;}
}
/*Pupil Animation*/
@-webkit-keyframes moveEye{	39%{top:70px;left:61px;}	40%{top:34px;left:81px;}	50%{top:34px;left:81px;}	51%{top:34px;left:21px;}	60%{top:34px;left:21px;}	61%{top:70px;left:61px;}
}
@keyframes moveEye{	39%{top:70px;left:61px;}	40%{top:34px;left:81px;}	50%{top:34px;left:81px;}	51%{top:34px;left:21px;}	60%{top:34px;left:21px;}	61%{top:70px;left:61px;}
}
/*Do the Banana Dance*/
@-webkit-keyframes hideBanana{	20%{top:-200px;left:40px;margin-left:0px;}	40%{top:20px;left:40px;}	50%{left:40px;margin-left:0px;}	51%{left:100%;margin-left:-240px;}	60%{top:20px;left:100%;margin-left:-240px;}	61%{top:-200px;left:100%;margin-left:-240px;}
}
@keyframes hideBanana{	20%{top:-200px;left:40px;margin-left:0px;}	40%{top:20px;left:40px;}	50%{left:40px;margin-left:0px;}	51%{left:100%;margin-left:-240px;}	60%{top:20px;left:100%;margin-left:-240px;}	61%{top:-200px;left:100%;margin-left:-240px;}
}

Suspecting Minion - Script Codes JS Codes

/*
* Animated CSS3 Suspecting Minion
*
* Works on Chrome, Firefox and IE10 (and others, probably).
*
* This work is based on Christoph Gromer's dribbble 'Minion Icon'
* http://dribbble.com/shots/1142817-Minion-Icon
* Really talented guy!
*/
Suspecting Minion - Script Codes
Suspecting Minion - Script Codes
Home Page Home
Developer ZeroSpree
Username zerospree
Uploaded July 13, 2022
Rating 4
Size 4,555 Kb
Views 107,272
Do you need developer help for Suspecting Minion?

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!

ZeroSpree (zerospree) Script Codes
Name
Steve Jobs
SCSS Bowser from box-shadows
CRT monitors pattern
Simple CSS3 particles animation
Single element animated CSS3 T-Rex
Pure CSS Apple Logo
Rodeo S03, Round 1 - Chili Recipe
Mr. C
Hexagon exercise.
Just another Button
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!