That Morning Coffee Feeling

Developer
Joe Harry
Size
4,005 Kb
Views
12,144
  1. That Morning Coffee Feeling Previews
  2. That Morning Coffee Feeling HTML Codes
  3. That Morning Coffee Feeling CSS Codes

How do I make an that morning coffee feeling?

CSS animation. A morning coffee visualisation... if only it would appear like this every morning.. What is a that morning coffee feeling? How do you make a that morning coffee feeling? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

That Morning Coffee Feeling Previews
IQ Test

That Morning Coffee Feeling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>That Morning Coffee Feeling</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>coffee time</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <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>
<div id="container"> <div id="mug"></div> <div id="handle"></div> <div class="shadow"></div>
</div>
<div class="rotater"><span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\<span>\</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</body>
</html>

That Morning Coffee Feeling - Script Codes CSS Codes

body { height: 100%; width: 100%; background-color: #0B1A21; font-family: 'Amatic SC', cursive; overflow: hidden; -webkit-animation: colors 6s linear normal infinite; animation: colors 6s linear normal infinite;
}
#container { width: 100px; height: 100px; margin: 50vh auto 0 auto; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);
}
#handle { position: relative; width: 15px; height: 15px; border-radius: 50%; margin-left: 50%; border: 8px solid #FF1744; opacity: 0; z-index: 1; -webkit-animation: handle-show 6s cubic-bezier(0.68, -0.55, 0.265, 1.55) normal infinite; animation: handle-show 6s cubic-bezier(0.68, -0.55, 0.265, 1.55) normal infinite;
}
#mug { box-shadow: 0 0 0 #FFF; position: relative; width: 0px; height: 0px; border-radius: 50%; border: 0px solid #FFF; background-color: #0B1A21; margin-left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; opacity: 0; -webkit-animation: mug-show 6s cubic-bezier(0.68, -0.55, 0.265, 1.55) normal infinite; animation: mug-show 6s cubic-bezier(0.68, -0.55, 0.265, 1.55) normal infinite;
}
.shadow { width: 100px; height: 40px; z-index: -1; opacity: 0; margin: -5px auto 0 auto; background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-animation: show 6s ease normal infinite; animation: show 6s ease normal infinite;
}
.rotater { position: absolute; width: 420px; height: 420px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border-radius: 50%; -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear;
}
div > span:first-child { -webkit-transform: translatex(210px); transform: translatex(210px);
}
span { width: 0; height: 420px; position: absolute; top: 0; left: 0; font-size: 0; color: #FFF; line-height: 0; -webkit-transform: rotate(24deg); transform: rotate(24deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: show 6s ease normal infinite; animation: show 6s ease normal infinite;
}
@-webkit-keyframes show { 25% { font-size: 0px; opacity: 0; } 30% { font-size: 0px; opacity: 1; } 35% { font-size: 96px; opacity: 1; } 95% { opacity: 1; } 100% { font-size: 96px; opacity: 0; }
}
@keyframes show { 25% { font-size: 0px; opacity: 0; } 30% { font-size: 0px; opacity: 1; } 35% { font-size: 96px; opacity: 1; } 95% { opacity: 1; } 100% { font-size: 96px; opacity: 0; }
}
@-webkit-keyframes colors { 27% { background-color: #0B1A21; } 30% { background-color: #81D4FA; } 95% { background-color: #4FC3F7; } 100% { background-color: #0B1A21; }
}
@keyframes colors { 27% { background-color: #0B1A21; } 30% { background-color: #81D4FA; } 95% { background-color: #4FC3F7; } 100% { background-color: #0B1A21; }
}
@-webkit-keyframes handle-show { 15% { opacity: 0; } 17% { -webkit-transform: translate(0, -22px); transform: translate(0, -22px); opacity: 1; } 22% { -webkit-transform: translate(20px, -22px); transform: translate(20px, -22px); } 95% { opacity: 1; } 100% { -webkit-transform: translate(20px, -22px); transform: translate(20px, -22px); opacity: 0; }
}
@keyframes handle-show { 15% { opacity: 0; } 17% { -webkit-transform: translate(0, -22px); transform: translate(0, -22px); opacity: 1; } 22% { -webkit-transform: translate(20px, -22px); transform: translate(20px, -22px); } 95% { opacity: 1; } 100% { -webkit-transform: translate(20px, -22px); transform: translate(20px, -22px); opacity: 0; }
}
@-webkit-keyframes mug-show { 8% { opacity: 1; border: 5px solid #FFF; width: 60px; height: 60px; box-shadow: 0 0 0 #FFF; } 17% { width: 60px; height: 20px; box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 0px 0 #CCC inset; } 25% { background-color: #0B1A21; } 30% { background-color: #4E342E; } 40% { box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 8px 0 #CCC inset; } 85% { box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 8px 0 #CCC inset; } 95% { opacity: 1; } 100% { border: 5px solid #FFF; width: 60px; height: 20px; background-color: #4E342E; box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 30px 0 #CCC inset; opacity: 0; }
}
@keyframes mug-show { 8% { opacity: 1; border: 5px solid #FFF; width: 60px; height: 60px; box-shadow: 0 0 0 #FFF; } 17% { width: 60px; height: 20px; box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 0px 0 #CCC inset; } 25% { background-color: #0B1A21; } 30% { background-color: #4E342E; } 40% { box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 8px 0 #CCC inset; } 85% { box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 8px 0 #CCC inset; } 95% { opacity: 1; } 100% { border: 5px solid #FFF; width: 60px; height: 20px; background-color: #4E342E; box-shadow: 0 2px 0 #FFF, 0 5px 0 #FFF, 0 7px 0 #FFF, 0 10px 0 #FFF, 0 12px 0 #FFF, 0 15px 0 #FFF, 0 17px 0 #FFF, 0 20px 0 #FFF, 0 22px 0 #FFF, 0 25px 0 #FFF, 0 27px 0 #FFF, 0 30px 0 #FFF, 0 32px 0 #FFF, 0 35px 0 #FFF, 0 37px 0 #FFF, 0 40px 0 #FFF, 0 42px 0 #FFF, 0 45px 0 #FFF, 0 47px 0 #FFF, 0 50px 0 #FFF, 0 30px 0 #CCC inset; opacity: 0; }
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
That Morning Coffee Feeling - Script Codes
That Morning Coffee Feeling - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 4.5
Size 4,005 Kb
Views 12,144
Do you need developer help for That Morning Coffee Feeling?

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!

Joe Harry (woodwork) Script Codes
Name
Social Links Plugin
Expanding Contact Form
Vanilla JS - A toggleClass function
Untranslatable
Stronger Together
Fake 3D
TTMM Pebble Clock
Samsung TV Loader
Step
Your Planet is Loading...
Create amazing captions 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!