A Pen by Tosh

Developer
Tosh
Size
2,586 Kb
Views
20,240
  1. A Pen by Tosh Previews
  2. A Pen by Tosh HTML Codes
  3. A Pen by Tosh CSS Codes

How do I make an a pen by tosh?

What is a a pen by tosh? How do you make a a pen by tosh? This script and codes were developed by Tosh on 13 September 2022, Tuesday.

A Pen by Tosh Previews
IQ Test

A Pen by Tosh - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Tosh</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="skull-head"> <div class="skull-eyes"></div> <div class="skull-eyes"></div> <div class="skull-nose"></div> <div class="skull-tooth"></div> <div class="skull-tooth"></div> <div class="skull-tooth"></div> <div class="scream-container"> <div class="scream">AAAAAAAAAAAAA</div> </div>
</div>
</div>
</body>
</html>

A Pen by Tosh - Script Codes CSS Codes

.container { background: #20c4f4; margin: 0 auto; padding: 100px; width: 300px; height: 300px; display: inline-block; border-radius: 50%;
}
.skull-head { margin: 0 auto; background-color: white; height: 245px; width: 290px; border-radius: 50%; position: relative; text-align: center; -webkit-transition: 0.2s; transition: 0.2s;
}
.skull-head:hover { -webkit-transform: scale(0.85, 1); transform: scale(0.85, 1); -webkit-transform-origin: center; transform-origin: center;
}
.skull-head:hover .skull-eyes { -webkit-transform: scale(1.1, 1.2); transform: scale(1.1, 1.2);
}
.skull-head:hover .scream { opacity: 1; -webkit-animation: scream 0.3s linear; animation: scream 0.3s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.skull-eyes { background-color: #20c4f4; border-radius: 50%; width: 90px; height: 90px; display: inline-block; margin: 60px 8px 0 8px; -webkit-transition: 0.2s; transition: 0.2s;
}
.skull-nose { background-color: #20c4f4; width: 25px; height: 40px; border-radius: 50%; margin: 0 auto;
}
.skull-tooth { border-radius: 50%; background-color: white; width: 40px; height: 50px; display: inline-block; margin: 10px -2px 0 -2px;
}
.scream { text-align: center; display: block; margin: 30px; font-weight: bold; font-family: 'arial', sans-serif; font-size: 40px; color: #fff; -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: 0.5s; transition: 0.5s;
}
.scream-container { width: 290px; overflow: hidden;
}
@-webkit-keyframes scream { 0% { -webkit-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); } 100% { -webkit-transform: translate(-86px, 0px) scale(1); transform: translate(-86px, 0px) scale(1); }
}
@keyframes scream { 0% { -webkit-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); } 100% { -webkit-transform: translate(-86px, 0px) scale(1); transform: translate(-86px, 0px) scale(1); }
}
A Pen by Tosh - Script Codes
A Pen by Tosh - Script Codes
Home Page Home
Developer Tosh
Username panev
Uploaded September 13, 2022
Rating 3
Size 2,586 Kb
Views 20,240
Do you need developer help for A Pen by Tosh?

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!

Tosh (panev) Script Codes
Name
Inline elements are bad people.
Dana vs. Todor Code Challenge Day 2
Remove transitions and animation if the user has low battery
Communication
Dana vs. Todor Code Challenge Day 1
D3mouse-test
Dana vs. Todor Code Challenge Day 3
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!