Microwave
How do I make an microwave?
Inspired by Chris Green's washing machine: http://codepen.io/vaskemaskine/pen/qitHF. What is a microwave? How do you make a microwave? This script and codes were developed by Boylett on 20 August 2022, Saturday.
Microwave Previews
Microwave - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Microwave</title> <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! */ @import url(http://fonts.googleapis.com/css?family=Orbitron);
@keyframes blink
{ 0% { opacity: 1 } 49.99% { opacity: 1 } 50% { opacity: 0 } 99.99% { opacity: 0 } 100% { opacity: 1 }
}
body { background: #2C3449 }
body:before
{ content: ""; position: absolute; top: 50%; left: 50%; margin: -140px 0 0 -175px; border-bottom: 40px solid #111212; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 250px;
}
body:after
{ content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; margin: 80px 0 0 -185px; width: 370px; height: 20px; background: #000; border-radius: 100%; -webkit-filter: blur(25px);
}
.microwave
{ position: absolute; z-index: 2; top: 50%; left: 50%; margin: -100px 0 0 -175px; width: 350px; height: 200px; background: #18191A; border-radius: 0 0 7px 7px;
}
.microwave:before
{ content: ""; position: absolute; top: 10px; right: 60px; bottom: 10px; left: 10px; background: #111212; border-radius: 5px;
}
.microwave:after
{ content: ""; position: absolute; bottom: 10px; right: 60px; bottom: 10px; left: 10px; border-bottom: 50px solid #141516; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 180px;
}
.microwave > .plate
{ position: absolute; top: 10px; right: 110px; bottom: 60px; left: 60px; background: #151617;
}
.microwave > .plate:before, .microwave > .plate:after
{ content: ""; position: absolute; z-index: 3; right: 0; bottom: -40px; left: 0; background: #282A2C; height: 30px; border-radius: 100%;
}
.microwave > .plate:after
{ bottom: -36px; background: #313436;
}
.microwave > .door
{ position: absolute; z-index: 4; top: 10px; right: 60px; bottom: 10px; left: 10px; border: 15px solid #0E0F0F; border-radius: 5px; box-shadow: 1px -3px #090A0A;
}
.microwave > .door:before
{ content: ""; position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; opacity: .15; background: url("http://subtlepatterns.com/patterns/diagonal-noise.png") repeat center; -webkit-filter: invert();
}
.microwave > .display
{ position: absolute; top: 10px; right: 10px; left: 300px; height: 20px; background: #111212; border-radius: 3px;
}
.microwave > .display > label
{ display: block; line-height: 20px; vertical-align: middle; color: #0FC309; font-family: Orbitron; font-size: 8px; text-align: center; text-shadow: 0 0 3px #0FC309; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.microwave > .display > .buttons
{ position: absolute; top: 100%; right: 0; left: 0; margin: 10px 0 0; text-align: center; line-height: 13px;
}
.microwave > .display > .buttons > button, .microwave > .display > button
{ display: inline-block; margin: 0; padding: 0; width: 10px; height: 10px; line-height: 10px; color: #888; font-family: Orbitron; font-size: 5px; text-align: center; vertical-align: middle; background: #000; border: none; border-radius: 2px; cursor: pointer;
}
.microwave > .display > .buttons > button.wide
{ width: 100%;
}
.microwave > .display > button
{ position: absolute; top: 160px; width: 100%; height: 20px; line-height: 20px; font-size: 10px; color: #171717;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="microwave"> <div class="plate"></div> <div class="door"></div> <div class="display"> <label id="display">00:00</label> <div class="buttons"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button> </button> <button>0</button> <button> </button> <button class="wide">start</button> <button class="wide">stop</button> </div> <button>eject</button> </div>
</div>
</body>
</html>
Microwave - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Orbitron);
@keyframes blink
{ 0% { opacity: 1 } 49.99% { opacity: 1 } 50% { opacity: 0 } 99.99% { opacity: 0 } 100% { opacity: 1 }
}
body { background: #2C3449 }
body:before
{ content: ""; position: absolute; top: 50%; left: 50%; margin: -140px 0 0 -175px; border-bottom: 40px solid #111212; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 250px;
}
body:after
{ content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; margin: 80px 0 0 -185px; width: 370px; height: 20px; background: #000; border-radius: 100%; -webkit-filter: blur(25px);
}
.microwave
{ position: absolute; z-index: 2; top: 50%; left: 50%; margin: -100px 0 0 -175px; width: 350px; height: 200px; background: #18191A; border-radius: 0 0 7px 7px;
}
.microwave:before
{ content: ""; position: absolute; top: 10px; right: 60px; bottom: 10px; left: 10px; background: #111212; border-radius: 5px;
}
.microwave:after
{ content: ""; position: absolute; bottom: 10px; right: 60px; bottom: 10px; left: 10px; border-bottom: 50px solid #141516; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 180px;
}
.microwave > .plate
{ position: absolute; top: 10px; right: 110px; bottom: 60px; left: 60px; background: #151617;
}
.microwave > .plate:before, .microwave > .plate:after
{ content: ""; position: absolute; z-index: 3; right: 0; bottom: -40px; left: 0; background: #282A2C; height: 30px; border-radius: 100%;
}
.microwave > .plate:after
{ bottom: -36px; background: #313436;
}
.microwave > .door
{ position: absolute; z-index: 4; top: 10px; right: 60px; bottom: 10px; left: 10px; border: 15px solid #0E0F0F; border-radius: 5px; box-shadow: 1px -3px #090A0A;
}
.microwave > .door:before
{ content: ""; position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; opacity: .15; background: url("http://subtlepatterns.com/patterns/diagonal-noise.png") repeat center; -webkit-filter: invert();
}
.microwave > .display
{ position: absolute; top: 10px; right: 10px; left: 300px; height: 20px; background: #111212; border-radius: 3px;
}
.microwave > .display > label
{ display: block; line-height: 20px; vertical-align: middle; color: #0FC309; font-family: Orbitron; font-size: 8px; text-align: center; text-shadow: 0 0 3px #0FC309; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.microwave > .display > .buttons
{ position: absolute; top: 100%; right: 0; left: 0; margin: 10px 0 0; text-align: center; line-height: 13px;
}
.microwave > .display > .buttons > button, .microwave > .display > button
{ display: inline-block; margin: 0; padding: 0; width: 10px; height: 10px; line-height: 10px; color: #888; font-family: Orbitron; font-size: 5px; text-align: center; vertical-align: middle; background: #000; border: none; border-radius: 2px; cursor: pointer;
}
.microwave > .display > .buttons > button.wide
{ width: 100%;
}
.microwave > .display > button
{ position: absolute; top: 160px; width: 100%; height: 20px; line-height: 20px; font-size: 10px; color: #171717;
}
| Developer | Boylett |
| Username | boylett |
| Uploaded | August 20, 2022 |
| Rating | 3.5 |
| Size | 3,446 Kb |
| Views | 46,552 |
Do you need developer help for Microwave?
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!
Boylett (boylett) Script Codes
| Name | Size |
| CSS Chat Bubbles | 2,094 Kb |
| Music Player by Olia Gozha | 4,573 Kb |
| Quote App Concept by Matthew Bird | 4,937 Kb |
| Simple Progressbar | 2,360 Kb |
| Time Tracker Widget by Martin David | 3,547 Kb |
| Music Player by Sebastian Beltz | 5,782 Kb |
| PixCrypt.js Website | 2,998 Kb |
| JsMeme Photo Caption Generator | 8,568 Kb |
| Particle Demo | 3,171 Kb |
| Notification Bell | 2,383 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
| Menubar compass mixin | Michaelparenteau | 4,925 Kb |
| Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
| Button Option Group | Honchoman | 1,859 Kb |
| A Pen by Shidhin | Shidhincr | 5,015 Kb |
| Heartbeat | Apetrov | 2,079 Kb |
| Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Mostly Fluid | Mccreath | 3,308 Kb |
| Apple website | Jds317 | 1,835 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!