Halloween Cute Spider
How do I make an halloween cute spider?
I wanted to make it creepy but it turned out to be cute.. What is a halloween cute spider? How do you make a halloween cute spider? This script and codes were developed by Takane Ichinose on 10 November 2022, Thursday.
Halloween Cute Spider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Halloween Cute Spider</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="body"> <div class="head"> <div class="ribbon"> <div></div> </div> <div class="eyes"></div> <div class="blushes"></div> <div class="mouth"></div> </div> </div> <div class="feet"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
</div>
</body>
</html>
Halloween Cute Spider - Script Codes CSS Codes
* { padding: 0; margin: 0;
}
body { background: #ff3636;
}
.container { width: 400px; height: 400px; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px);
}
.body { background: #1a1a1a; width: 200px; height: 200px; border: solid 10px black; position: absolute; top: 100px; left: 90px; border-radius: 50%; animation: body 0.5s infinite linear;
}
.head { background: #1a1a1a; width: 120px; height: 120px; border: solid 10px black; position: absolute; bottom: -10px; left: 30px; border-radius: 50%;
}
.ribbon { position: absolute; top: 15px; right: 30px; transform: rotate(15deg);
}
.ribbon:before { content: ""; background: #ff1f1f; width: 30px; height: 25px; border: solid 8px black; display: block; position: absolute; top: 0; right: 0; border-radius: 10px 50px 50px 10px / 10px 30px 30px 10px;
}
.ribbon:after { content: ""; background: #ff1f1f; width: 20px; height: 20px; border: solid 8px black; display: block; position: absolute; top: 3px; left: -20px; border-radius: 50%;
}
.ribbon > div:before { content: ""; background: #ff1f1f; width: 30px; height: 25px; border: solid 8px black; display: block; position: absolute; top: 0; left: 0; border-radius: 50px 10px 10px 50px / 35px 10px 10px 35px;
}
.eyes { width: 100%; height: 10px; position: absolute; top: 63px;
}
.eyes:before { content: ""; background: black; width: 10px; height: 10px; position: absolute; top: 0; left: 33px; border-radius: 50%;
}
.eyes:after { content: ""; background: black; width: 10px; height: 10px; position: absolute; top: 0; right: 33px; border-radius: 50%;
}
.blushes { width: 100%; height: 15px; position: absolute; top: 75px;
}
.blushes:before { content: ""; background: #ff1212; width: 20px; height: 8px; position: absolute; top: 0; left: 20px; border-radius: 50%;
}
.blushes:after { content: ""; background: #ff1212; width: 20px; height: 8px; position: absolute; top: 0; right: 20px; border-radius: 50%;
}
.mouth { width: 15px; height: 20px; border: solid 5px black; border-top: none; border-radius: 0 0 50% 50%; position: absolute; top: 85px; left: 47px;
}
.feet > div { width: 120px; height: 60px; border: solid 10px black; border-bottom: none; position: absolute; border-radius: 150px 150px 0 0;
}
.feet > div:nth-child(1) { bottom: 60px; left: 20px; transform: rotate(-25deg); animation: foot1 0.5s infinite linear;
}
.feet > div:nth-child(2) { bottom: 60px; right: 20px; transform: rotate(25deg); animation: foot2 0.5s infinite linear;
}
.feet > div:nth-child(3) { bottom: 80px; left: 10px; transform: rotate(-15deg); animation: foot3 0.5s infinite linear;
}
.feet > div:nth-child(4) { bottom: 80px; right: 10px; transform: rotate(15deg); animation: foot4 0.5s infinite linear;
}
.feet > div:nth-child(5) { bottom: 100px; left: 10px; transform: rotate(0deg); animation: foot5 0.5s infinite linear;
}
.feet > div:nth-child(6) { bottom: 100px; right: 10px; transform: rotate(0deg); animation: foot6 0.5s infinite linear;
}
.feet > div:nth-child(7) { bottom: 120px; left: 10px; transform: rotate(15deg); animation: foot7 0.5s infinite linear;
}
.feet > div:nth-child(8) { bottom: 120px; right: 10px; transform: rotate(-15deg); animation: foot8 0.5s infinite linear;
}
@keyframes body { 0% { top: 100px; } 50% { top: 90px; }
}
@keyframes foot1 { 0% { transform: rotate(-25deg); } 50% { transform: rotate(-35deg); }
}
@keyframes foot2 { 0% { transform: rotate(25deg); } 50% { transform: rotate(35deg); }
}
@keyframes foot3 { 0% { transform: rotate(-15deg); } 50% { transform: rotate(-25deg); }
}
@keyframes foot4 { 0% { transform: rotate(15deg); } 50% { transform: rotate(25deg); }
}
@keyframes foot5 { 0% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); }
}
@keyframes foot6 { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); }
}
@keyframes foot7 { 0% { transform: rotate(15deg); } 50% { transform: rotate(5deg); }
}
@keyframes foot8 { 0% { transform: rotate(-15deg); } 50% { transform: rotate(-5deg); }
}
Developer | Takane Ichinose |
Username | takaneichinose |
Uploaded | November 10, 2022 |
Rating | 3.5 |
Size | 2,229 Kb |
Views | 16,192 |
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!
Name | Size |
Mario | 3,902 Kb |
Cow drawing | 5,437 Kb |
Bootstrap dialog box | 2,696 Kb |
Bootstrap Messaging | 3,745 Kb |
Navbar login | 2,402 Kb |
Pure CSS Off-Canvas with Bootstrap | 2,517 Kb |
Cat | 2,359 Kb |
Level 1 monster | 3,123 Kb |
Responsive Full-page Parallax Slider | 2,887 Kb |
Tabs | 2,974 Kb |
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!
Name | Username | Size |
Two Element Typeface | Chrisota | 4,942 Kb |
Layout | X-gyba | 4,234 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Videogular - Overlay Play Plugin | 2fdevs | 2,432 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
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!