"Plain CSS HTML Car on Road"
Bootstrap 3.3.0 Snippet by pejonic

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title> Car that can move </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="hope_2"> <marquee scrolldelay="100" direction="right" scrollamount="5"> <div class="trees"> </div> <div class="trees"> </div> </marquee> <div class="road"> <div class="road_line"></div> </div> <div class="car"></div> <div class="car_body"> <div class="w1 box"><img src="http://preloaders.net/generator.php?image=39&speed=9&fore_color=000000&back_color=FFFFFF&size=64x64&transparency=0&reverse=0&orig_colors=0&gray_transp=1&image_type=1&inverse=0&flip=0&frames_amount=20&word=130-144-11-32-115-140-54-36-36-36&download&uncacher=32.01629164570656" /></div> <div class="w2 box"><img src="http://preloaders.net/generator.php?image=39&speed=9&fore_color=000000&back_color=FFFFFF&size=64x64&transparency=0&reverse=0&orig_colors=0&gray_transp=1&image_type=1&inverse=0&flip=0&frames_amount=20&word=130-144-11-32-115-140-54-36-36-36&download&uncacher=32.01629164570656" /></div> </div> </body> </html>
body, html{ margin: 0; padding: 0; } body{ background: skyblue; height: 700px; } .road{ background: #444; height: 100px; position: absolute; bottom: 0; width: 100%; } .road_line{ height: 100px; border-top: 10px #fff dashed; position: absolute; top: 45px; width: 100%; } .car{ background: red; width: 300px; height: 100px; border-radius: 10px; border-top-left-radius: 106px; border-top-right-radius: 60px; position: absolute; bottom: 116px; left: 143px; } .trees { width: 200%; height: 400px; display: inline-block; } .trees { background-image: url('https://pixabay.com/static/uploads/photo/2013/07/12/14/45/forest-148727_960_720.png'); } .box img { height: 100%; } .w1.box { position: absolute; bottom: 84px; left: 164px; } .w2.box { position: absolute; bottom: 84px; left: 343px; } .hope_2 { position: relative; top: 344px; } .box{ border: 10px solid #000; background: #fff; border-radius: 50%; height: 60px; width: 60px; overflow: hidden; }

Related: See More

Now UI Kit

Questions / Comments: