Shifty the CSS Crab

Developer
Joni Trythall
Size
3,034 Kb
Views
16,192
  1. Shifty the CSS Crab Previews
  2. Shifty the CSS Crab HTML Codes
  3. Shifty the CSS Crab CSS Codes

How do I make an shifty the css crab?

What is a shifty the css crab? How do you make a shifty the css crab? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

Shifty the CSS Crab Previews
IQ Test

Shifty the CSS Crab - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shifty the CSS Crab </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='contain-crab'> <div class='body'></div> <div class='eye'> <div class='pupil'></div> </div> <div class='stem'></div> <div class='eye eye-2'> <div class='pupil'></div> </div> <div class='stem stem-2'></div> <div class='arm'> <div class='claw'></div> </div> <div class='arm arm-2'> <div class='claw'></div> </div> <div class='leg'></div> <div class='leg leg-2'></div> <div class='leg leg-3'></div> <div class='leg leg-4'></div> <div class='leg leg-5'></div> <div class='leg leg-6'></div>
</div>
</body>
</html>

Shifty the CSS Crab - Script Codes CSS Codes

body { background-color: #92d1ce;
}
.contain-crab { position: relative; margin: 200px auto; width: 350px;
}
.body { position: absolute; z-index: 6; background: #e13b2c; border-radius: 50%; width: 350px; height: 300px;
}
.body:after { position: absolute; top: 50px; left: 125px; display: block; border-bottom: 6px solid #333333; border-radius: 50%; width: 100px; height: 50px; content: '';
}
.eye { position: absolute; top: -140px; left: 20px; z-index: 5; background: white; border-radius: 50%; width: 100px; height: 100px;
}
.eye-2 { left: 235px;
}
.stem { position: absolute; top: -50px; left: 80px; z-index: 1; display: block; background: #e13b2c; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); width: 20px; height: 100px; content: '';
}
.stem-2 { left: 245px; -webkit-transform: rotate(15deg); transform: rotate(15deg);
}
.pupil { position: absolute; top: 30px; left: 35px; background: #333333; border-radius: 50%; border: 10px solid #92d1ce; width: 30px; height: 30px; -webkit-animation: shift 3s infinite; animation: shift 3s infinite;
}
.arm { position: absolute; left: -30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #e13b2c; width: 30px; height: 150px;
}
.arm-2 { left: 350px; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.claw { position: absolute; top: -150px; left: -60px; background: #e13b2c; border-radius: 50%; width: 150px; height: 175px;
}
.claw:after { position: absolute; left: 15px; display: block; width: 0; height: 0; border-left: 60px dotted transparent; border-right: 60px dotted transparent; border-top: 90px solid #92d1ce; content: '';
}
.leg { position: absolute; left: -44px; top: 75px; -webkit-transform: rotate(-120deg); transform: rotate(-120deg); background: #e13b2c; border-radius: 50px; width: 30px; height: 180px;
}
.leg:after { position: absolute; left: -50px; top: -135px; display: block; background: #e13b2c; border-radius: 50px; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); width: 30px; height: 180px; content: '';
}
.leg-2 { top: 99px; left: -10px;
}
.leg-3 { top: 120px; left: 30px;
}
.leg-4 { top: 181px; left: 450px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg);
}
.leg-5 { top: 205px; left: 415px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg);
}
.leg-6 { top: 229px; left: 380px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg);
}
@-webkit-keyframes shift { 50% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } 75% { -webkit-transform: translateY(-15px) translateX(-10px); transform: translateY(-15px) translateX(-10px); }
}
@keyframes shift { 50% { -webkit-transform: translateX(-25px); transform: translateX(-25px); } 75% { -webkit-transform: translateY(-15px) translateX(-10px); transform: translateY(-15px) translateX(-10px); }
}
Shifty the CSS Crab - Script Codes
Shifty the CSS Crab - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4
Size 3,034 Kb
Views 16,192
Do you need developer help for Shifty the CSS Crab?

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!

Joni Trythall (jonitrythall) Script Codes
Name
Frosted Glass Quote
Floated Image Link Issue
Blurred Gear Loader
Franklin The CSS Fish
Brian The CSS Bee
Hinged Twitter Button
Weird Circle Loader
Animated Shopping Cart Icons
Nested Noodle Loader
Rainbow Loader
Create amazing video scripts 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!