CSS - Cat on ride
How do I make an css - cat on ride?
Another cat! CSS illustration and animation.. What is a css - cat on ride? How do you make a css - cat on ride? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.
CSS - Cat on ride - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS - Cat on ride</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="car"> <div class="car-body"> <div class="part-one"> <div class="drivmirror"></div> <div class="cat"> <span class="eyes left"></span> <span class="eyes right"></span> <span class="mouth"></span> </div> <div class="helm"></div> </div> <div class="mirrors"> <div class="mirror left"></div> <div class="mirror right"></div> </div> <div class="part-two"> <div class="lights"> <div class="light left"></div> <div class="light right"></div> </div> <div class="lights second"> <div class="light left"></div> <div class="light right"></div> </div> </div> </div> <div class="wheels"> <div class="wheel left"></div> <div class="wheel right"></div> </div> </div> <div class="sign"> <div class="message"><span>Don't Stop</span></div> <div class="base"></div> </div> <div class="sun yellow"></div>
</div>
<div class="signature"> <p>Made with <i class="much-heart"></i> by <a href="https://codepen.io/AngelaVelasquez">Angela Velasquez</a></p>
</div>
</body>
</html>
CSS - Cat on ride - Script Codes CSS Codes
body,html { background:#FAFAFA; height:100%;
}
.yellow { background: #FFC137;
}
div, ul , li{ display: block; position: absolute; margin: auto; padding: 0; top: 0; bottom: 0; left: 0; right:0;
}
.left{ right: auto; left: 0;}
.right{ left: auto; right: 0;}
span{ font-family: 'Imprima', sans serif; text-align: center; }
.wrapper{ height: 350px; width: 420px; border-bottom: 8px solid #4CA653; overflow: hidden;
}
.car{ height: 60%; width: 60%; overflow: hidden; top: auto; right: auto; left: 10%; z-index: 1;
}
.car .car-body{ height: 85%; width: 100%; bottom: auto; z-index: 2; animation:car 0.75s infinite; -webkit-animation:car 0.75s infinite;
}
.car .wheels{ height: 15%; width: 80%; top: auto; z-index: 1;
}
.car .wheels .wheel{ height: 100%; width: 20%; background: #333; top: auto; border-radius: 0 0 30% 30%;
}
.car .mirrors{ height: 15%; width: 100%; bottom: auto; top: 40%;
}
.car .mirrors .mirror{ height: 100%; width: 10%; background: #333; top: auto; border-radius: 30%;
}
.car .car-body .part-one{ height: 50%; width: 72%; bottom: auto; border: 10px solid #0C5189; border-radius: 50% 50% 0 0 ; overflow: hidden;
}
.car .car-body .part-two{ height: 50%; width: 100%; top: auto; background: #0C5189; border-radius: 40px 40px 20px 20px;
}
.car-body .part-one .drivmirror{ height: 20%; width: 25%; bottom: auto; top: 1px; background: #DDD; border-radius: 25% ;
}
.car-body .part-one .helm{ height:40px; width: 40px; top: auto; bottom: -35px; border: 8px solid #333; border-radius: 50% ; left: auto; right: 18%;
}
.cat { background:#73635D; height: 60%; top: auto; bottom: 0; width: 65px; z-index: 0; left: auto; right: 25px;
}
.cat:before, .cat:after { width: 0; height: 0; top: -10px; position: absolute; content: "";
}
.cat:before{ border-left: 0px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #73635D; left: 0;
}
.cat:after{ border-right: 0px solid transparent; border-left: 15px solid transparent; border-bottom: 15px solid #73635D; right: 0;
}
.cat .eyes{ position: absolute; height: 8px; width: 8px; background: #FFF; border-radius: 100%; top: 15px;
}
.cat .eyes.left{ left: 12px; }
.cat .eyes.right{ right: 12px; }
.cat .mouth{ position: absolute; height: 4px; width: 60%; background: #eee; border-radius: 0 0 30% 30%; top: 28px; margin: auto; left: 0; right: 0;
}
.car:hover .cat .mouth{ height: 6px; width: 6px; border-radius: 50%; top: 26px;
}
.car-body .part-two .lights{ height: 30%; width: 80%;
}
.part-two .lights .light{ height: 100%; width: 15%; background: #FFF; border-radius: 50%;
}
.part-two .lights.second{ height: 8px; width: 80%; top: auto; bottom: 10%;
}
.part-two .lights.second .light{ width: 20px; border-radius: 25%;
}
.sign{ height: 80%; width: 30%; left: auto; top: auto; z-index: 2;
}
.sign .message{ width: 0; height: 0; border: 60px solid transparent; border-bottom-color: #FFC137; position: relative; top: -60px; bottom: auto; z-index: 2;
}
.sign .message:after { content: ''; position: absolute; left: -60px; top: 60px; width: 0; height: 0; border: 60px solid transparent; border-top-color: #FFC137;
}
.sign .message span{ display: block; width: 60px; position: absolute; z-index: 9; text-align: center; left: -32px; top: 50px; color: #333; font-size: .85em; font-weight: bolder; font-family: Helvetica, Arial, Sans-Serif; text-transform: uppercase;
}
.sign .base{ background: #AAA; height: 80%; width: 10px; top: auto;
}
.sun{ height: 300px; width: 300px; top: auto; bottom: -150px; border-radius: 50%; z-index: 0;
}
.signature { position: absolute; margin: auto; bottom: 0; top: auto;
}
.signature p{ text-align: center; font-family: Helvetica, Arial, Sans-Serif; font-size: 0.85em;
}
.signature .much-heart{ display: inline-block; position: relative; margin: 0 4px; height: 10px; width: 10px; background: #AC1D3F; border-radius: 4px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.signature .much-heart::before,
.signature .much-heart::after { display: block; content: ''; position: absolute; margin: auto; height: 10px; width: 10px; border-radius: 5px; background: #AC1D3F; top: -4px;
}
.signature .much-heart::after { bottom: 0; top: auto; left: -4px;
}
.signature a { color: #333; text-decoration: none; font-weight: bold;
}
@keyframes car {
0 {top:0;}
25% {top:2px;}
50% {top:0;}
75% {top:5px;}
100% {top: 0;}
}
@-webkit-keyframes car /*Safari and Chrome*/ {
0 {top:0;}
25% {top:2px;}
50% {top:0;}
75% {top:5px;}
100% {top: 0;}
}
Developer | Angela Velasquez |
Username | AngelaVelasquez |
Uploaded | September 07, 2022 |
Rating | 4 |
Size | 2,999 Kb |
Views | 36,432 |
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 |
CSS - Cat on the Moon | 2,564 Kb |
CSS - Cat with balloon | 2,849 Kb |
CSS on hover effects | 2,689 Kb |
CSS - Cat on a Plane | 2,774 Kb |
Search animation on CSS | 5,284 Kb |
Snake | 5,200 Kb |
CSS radio buttons | 2,799 Kb |
CSS Fruit Background - Pineapple | 2,574 Kb |
Layout Theme | 3,896 Kb |
CSS - Cat in the sky | 2,610 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 |
Scroll to top button | DominicFrancois | 3,743 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Social buttons | Flacu | 2,022 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Animated Logo | Shakdaniel | 2,672 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!