Penmau5

Developer
BJack
Size
3,811 Kb
Views
4,048
  1. Penmau5 Previews
  2. Penmau5 HTML Codes
  3. Penmau5 CSS Codes
  4. Penmau5 JS Codes

How do I make an penmau5?

Pure css deadmau5 head. What is a penmau5? How do you make a penmau5? This script and codes were developed by BJack on 12 January 2023, Thursday.

Penmau5 Previews
IQ Test

Penmau5 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>penmau5</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! */ html { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/45816/noisy-bg.png") #f7941e;
}
.mau5 * { box-shadow: 0 0 10px 0 #000;
}
.mau5 { box-shadow: 0 0 10px 0 #000; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); height: 200px; width: 200px; border-radius: 100%; background: #000;
}
.mau5 .eye-left { height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 50px; font-weight: bold; background: #fff; position: absolute; border-radius: 50%; top: 30px; left: 30px;
}
.mau5 .eye-right { height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 50px; font-weight: bold; background: #fff; position: absolute; border-radius: 50%; top: 30px; right: 30px;
}
.mau5 .ear-left { height: 150px; width: 150px; background: #000; border-radius: 50%; position: absolute; top: -75px; left: -75px;
}
.mau5 .ear-right { height: 150px; width: 150px; background: #000; border-radius: 50%; position: absolute; top: -75px; right: -75px;
}
.mau5 .mouth { height: 0; width: 0; position: absolute; border-top: 100px solid transparent; border-bottom: 100px solid #fff; border-left: 100px solid transparent; border-right: 100px solid #fff; border-radius: 50%; transform: rotate(45deg) scale(0.9); box-shadow: none;
}
.blink { animation: blink 0.4s ease;
}
@keyframes blink { 100% { transform: scaleY(-1); }
}
@keyframes dance { 25% { transform: rotate(-35deg); } 75% { transform: rotate(35deg); }
}
.laugh { animation: laugh 1s ease-in-out;
}
@keyframes laugh { 20% { transform: rotate(45deg) scale(0.65); } 40% { transform: rotate(45deg) scale(0.9); } 60% { transform: rotate(45deg) scale(0.5); } 80% { transform: rotate(45deg) scale(0.9); } 90% { transform: rotate(45deg) scale(0.65); } 100% { transform: rotate(45deg) scale(0.9); }
}
.dance { animation: dance 1s ease infinite;
}
button { position: absolute; bottom: 10%; left: calc(50% - 75px); width: 150px; height: 50px; line-height: 50px; border: 1px solid #990000; background: #d90000; color: #fff; text-shadow: 1px 1px 0 #990000; border-radius: 4px; cursor: pointer;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="mau5"> <div class="ear-left"></div> <div class="ear-right"></div> <div class="eye-left">&times;</div> <div class="eye-right">&times;</div> <div class="mouth"></div>
</div>
<button onclick="dance();">Dance mau5!</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Penmau5 - Script Codes CSS Codes

html { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/45816/noisy-bg.png") #f7941e;
}
.mau5 * { box-shadow: 0 0 10px 0 #000;
}
.mau5 { box-shadow: 0 0 10px 0 #000; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); height: 200px; width: 200px; border-radius: 100%; background: #000;
}
.mau5 .eye-left { height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 50px; font-weight: bold; background: #fff; position: absolute; border-radius: 50%; top: 30px; left: 30px;
}
.mau5 .eye-right { height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 50px; font-weight: bold; background: #fff; position: absolute; border-radius: 50%; top: 30px; right: 30px;
}
.mau5 .ear-left { height: 150px; width: 150px; background: #000; border-radius: 50%; position: absolute; top: -75px; left: -75px;
}
.mau5 .ear-right { height: 150px; width: 150px; background: #000; border-radius: 50%; position: absolute; top: -75px; right: -75px;
}
.mau5 .mouth { height: 0; width: 0; position: absolute; border-top: 100px solid transparent; border-bottom: 100px solid #fff; border-left: 100px solid transparent; border-right: 100px solid #fff; border-radius: 50%; transform: rotate(45deg) scale(0.9); box-shadow: none;
}
.blink { animation: blink 0.4s ease;
}
@keyframes blink { 100% { transform: scaleY(-1); }
}
@keyframes dance { 25% { transform: rotate(-35deg); } 75% { transform: rotate(35deg); }
}
.laugh { animation: laugh 1s ease-in-out;
}
@keyframes laugh { 20% { transform: rotate(45deg) scale(0.65); } 40% { transform: rotate(45deg) scale(0.9); } 60% { transform: rotate(45deg) scale(0.5); } 80% { transform: rotate(45deg) scale(0.9); } 90% { transform: rotate(45deg) scale(0.65); } 100% { transform: rotate(45deg) scale(0.9); }
}
.dance { animation: dance 1s ease infinite;
}
button { position: absolute; bottom: 10%; left: calc(50% - 75px); width: 150px; height: 50px; line-height: 50px; border: 1px solid #990000; background: #d90000; color: #fff; text-shadow: 1px 1px 0 #990000; border-radius: 4px; cursor: pointer;
}

Penmau5 - Script Codes JS Codes

function blink(){ $("div[class*='eye'").toggleClass('blink');
}
setInterval(blink, 2000);
function laugh(){ $(".mouth").toggleClass('laugh');
}
setInterval(laugh, 5000);
function dance(){ $(".mau5").toggleClass('dance');
}
Penmau5 - Script Codes
Penmau5 - Script Codes
Home Page Home
Developer BJack
Username BJack
Uploaded January 12, 2023
Rating 3
Size 3,811 Kb
Views 4,048
Do you need developer help for Penmau5?

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!

BJack (BJack) Script Codes
Name
Remembrance Day 2014.
CSS3 Circular Loading
Progress bar profile completion
Twitter card
Mobile Menu
Weather Widget
Audio Slider
StackOverflow solution
Fullscreen-slide-in animated menu
Coffee loader
Create amazing marketing copy 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!