Just SMILE

Developer
Godje
Size
3,098 Kb
Views
24,288
  1. Just SMILE Previews
  2. Just SMILE HTML Codes
  3. Just SMILE CSS Codes

How do I make an just smile?

What is a just smile? How do you make a just smile? This script and codes were developed by Godje on 12 September 2022, Monday.

Just SMILE Previews
IQ Test

Just SMILE - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Just SMILE</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <h2>just smile</h2>
<div id="smile"> <div class="eye"></div> <div class="eye"></div>
</div>
</body>
</html>

Just SMILE - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Lato:100';
* { box-sizing: border-box;
}
html { oveflow-x: hidden;
}
body { width: 100vw; height: 100vh; background-image: -webkit-linear-gradient(55deg, #FF5F6D -10%, #FFC371); background-image: linear-gradient(35deg, #FF5F6D -10%, #FFC371); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; text-transform: uppercase; font-family: "Lato";
}
body h2 { font-size: 52px; margin: 0; line-height: 0;
}
#smile { width: 320px; height: 320px; position: relative; display: block;
}
#smile::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; bottom: 0; left: 0; border-radius: 50%; border: 0.55vh solid transparent; border-bottom: 0.55vh solid white; -webkit-animation: mouthStuff 10s infinite; animation: mouthStuff 10s infinite;
}
#smile .eye { width: 0.55vh; height: 53.33333px; display: block; position: absolute; background-color: white; left: 106.66667px; top: 160px; -webkit-animation: eyeStuff 10s infinite; animation: eyeStuff 10s infinite;
}
#smile .eye::after { content: ""; display: block; position: absolute; width: 35.55556px; height: 35.55556px; border-radius: 50%; border: 0.55vh solid transparent; border-bottom: 0.55vh solid white; top: -50%; border-radius: 50%; -webkit-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); -webkit-animation: browStuff 10s infinite; animation: browStuff 10s infinite;
}
#smile .eye:nth-child(2) { left: 213.33333px;
}
@-webkit-keyframes eyeStuff { 30% { -webkit-transform: translateX(21.33333px) rotateZ(6deg); transform: translateX(21.33333px) rotateZ(6deg); } 50% { -webkit-transform: translateX(-21.33333px) rotateZ(-6deg); transform: translateX(-21.33333px) rotateZ(-6deg); } 70%, 0%, 100% { -webkit-transform: translateX(0) rotateZ(0deg); transform: translateX(0) rotateZ(0deg); }
}
@keyframes eyeStuff { 30% { -webkit-transform: translateX(21.33333px) rotateZ(6deg); transform: translateX(21.33333px) rotateZ(6deg); } 50% { -webkit-transform: translateX(-21.33333px) rotateZ(-6deg); transform: translateX(-21.33333px) rotateZ(-6deg); } 70%, 0%, 100% { -webkit-transform: translateX(0) rotateZ(0deg); transform: translateX(0) rotateZ(0deg); }
}
@-webkit-keyframes mouthStuff { 30% { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } 50% { -webkit-transform: rotateZ(-25deg); transform: rotateZ(-25deg); } 70%, 0%, 100% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
}
@keyframes mouthStuff { 30% { -webkit-transform: rotateZ(25deg); transform: rotateZ(25deg); } 50% { -webkit-transform: rotateZ(-25deg); transform: rotateZ(-25deg); } 70%, 0%, 100% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
}
@-webkit-keyframes browStuff { 30% { -webkit-transform: rotateZ(190deg) translateX(50%); transform: rotateZ(190deg) translateX(50%); } 50% { -webkit-transform: rotateZ(170deg) translateX(50%); transform: rotateZ(170deg) translateX(50%); } 80%, 0%, 100% { -webkit-transform: rotateZ(180deg) translateX(50%); transform: rotateZ(180deg) translateX(50%); }
}
@keyframes browStuff { 30% { -webkit-transform: rotateZ(190deg) translateX(50%); transform: rotateZ(190deg) translateX(50%); } 50% { -webkit-transform: rotateZ(170deg) translateX(50%); transform: rotateZ(170deg) translateX(50%); } 80%, 0%, 100% { -webkit-transform: rotateZ(180deg) translateX(50%); transform: rotateZ(180deg) translateX(50%); }
}
Just SMILE - Script Codes
Just SMILE - Script Codes
Home Page Home
Developer Godje
Username Godje
Uploaded September 12, 2022
Rating 4
Size 3,098 Kb
Views 24,288
Do you need developer help for Just SMILE?

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!

Godje (Godje) Script Codes
Name
Just a simplest particle canvas
Cute carnival lights
Ceasar Cipher Encryptor
Nice multipart image slider
Polygon Cursor Canvas
Color Chaos
Dark Spirit Fire
Wavy thing
Dot Digit Input
Almost MKBHD animation
Create amazing love letters 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!