Moving Car Animation With Html & Css
HTML CSS
Video Tutorial:
Html Code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/x-icon" href="assets/images/favicon.png"><title>NzCoding - Animated Car With Html & Css</title><link rel="stylesheet" href="assets/css/style.css" /></head><body><div class="bg"><img src="assets/images/car2.png" alt="" class="car"></div></body></html>
Css Code:
body {padding: 0;margin: 0;overflow-y: hidden;}.bg {position: relative;background: #00fdff url(../images/background.jpg);height: 100vh;background-size: cover;background-position: 0 0;background-repeat: repeat-x;animation: animate 15s linear infinite;}.car {position: absolute;bottom: -70px;left: 15%;}@keyframes animate {from {background-position: 0 0;}to {background-position: 100% 0;}}
Hope it will help you.
Comments (0)
Leave a Comment
You need to login to post a comment
Login to Comment