HomeworkLib
Question

Create an animation of car that starts slowly, then moves fast after coming to a stop...

Create an animation of car that starts slowly, then moves fast after coming to a stop slowly. Then repeat the same process in reverse and continue this indefinitely. You can use the resources (or similar .png
http://pngimg.com/imgs/technic/car_wheel/

In HTML AND CSS

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

HTML:


<body>
<div class="moon"></div>

<div class="skyline">
<div class="building1-shadow"></div>
<div class="building1">

<div class="building-left-half"></div>
<div class="building-right-half"></div>
</div>
</div>
<div class="road">
<div class="road-top-half"></div>
<div class="road-bottom-half"></div>
</div>

<div class="car-container">
<div class="car-top1">
<div class="window1"></div>
<div class="window2"></div>

</div>
<div class="car-top2">
<div class="door">
<div class="door-knob"></div>
</div>
</div>
<div class="car-bottom">
<div class="wheel1-top"></div>
<div class="wheel1">
<div class="wheel-dot1"></div>
<div class="wheel-dot2"></div>
<div class="wheel-dot3"></div>
<div class="wheel-dot4"></div>

</div>

<div class="wheel2-top"></div>
<div class="wheel2">
<div class="wheel-dot1"></div>
<div class="wheel-dot2"></div>
<div class="wheel-dot3"></div>
<div class="wheel-dot4"></div>
</div>
</div>
</div>


</body>

CSS:

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
overflow: hidden;
height: 100vh;
background: linear-gradient(180deg, #09283d, #1b415c, #29516c, #6e8ea5, #7cadd0, #7cadd0, #7cadd0, #7cadd0, #6e8ea5, #3a6583, #1a4461, #09283d);
background-size: 2400% 2400%;
animation: dayNight 60s ease infinite;
}

@keyframes dayNight {
0%{background-position:25% 0%}
50%{background-position:76% 100%}
100%{background-position:25% 0%}
}
@keyframes driving {
0% {
left: -25%;
}
10% {
bottom: 0%;
}
20% {
transform: scale(0.5) rotateZ(-5deg);
bottom: 5%
}
25% {
transform: scale(0.5) rotateZ(0deg);
}
40% {
transform: scale(0.5) rotateZ(5deg);
}
50% {
transform: scale(0.5) rotateZ(0deg);
}
100% {
left: 110%;
bottom: 10%;
transform: scale(0.5) rotateZ(0deg);
}
}
@keyframes road-moving {
100% {
transform: translate(-2400px);
}
}
@keyframes wheelsRotation {
100% {
transform: rotate(360deg);
}
}
@keyframes moon {
50% {
transform: translateY(-20px);
}
100% {
transform: translate(80px, -140px);
}
}
@keyframes sun-moon {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
/* CAR CONTAINER */
  
.car-container {
position: absolute;
bottom: -10%;
width: 430px;
height: 300px;
animation: driving 5s infinite linear;
transform: scale(0.5);
}
.car-container:after {
content: "";
width: 426px;
height: 1px;
margin-top: 88px;
display: block;
position: absolute;
left: -3%;
z-index: -1;
bottom: 0;
box-shadow: 2px -15px 25px 2px #000000;
}
/* WHEELS */
  
.wheel1,
.wheel2 {
width: 120px;
height: 120px;
background-color: grey;
border-radius: 50%;
border: 20px solid black;
position: absolute;
bottom: 0;
animation: wheelsRotation 1s infinite linear;
}
.wheel1 {
left: 5%;
}
.wheel1-top,
.wheel2-top {
bottom: 48px;
position: absolute;
width: 106px;
height: 80px;
border-radius: 50%;
z-index: 5;
box-shadow: 0px 13px 3px 0px rgba(240, 240, 240, 0.53);
transform: rotateX(180deg);
}
.wheel1-top {
left: 7%;
}
.wheel2-top {
right: 7%;
}
.wheel2 {
right: 5%;
}
.wheel-dot1,
.wheel-dot2 {
width: 10px;
height: 25px;
background-color: black;
position: absolute;
}
.wheel-dot3,
.wheel-dot4 {
width: 25px;
height: 10px;
background-color: black;
position: absolute;
}
.wheel-dot1 {
top: 10%;
left: 45%;
}
.wheel-dot2 {
bottom: 10%;
left: 45%;
}
.wheel-dot3 {
top: 45%;
right: 10%;
}
.wheel-dot4 {
top: 45%;
left: 10%;
}
.door {
width: 110px;
height: 100px;
border: 3px solid #B57A84;
position: absolute;
left: 36%;
top: 16px;
border-radius: 10% 40% 10% 10%;
}
.door-knob {
width: 30px;
height: 14px;
background-color: #E8E6E6;
border-radius: 30%;
position: absolute;
left: 20%;
top: 5%;
border: 1px solid lightcoral;
}
.car-top1 {
border-radius: 25% 40% 0 0;
background-color: #6A1621;
max-width: 100%;
width: 250px;
height: 130px;
position: absolute;
top: 0;
left: 4%;
}
.window1,
.window2 {
background-color: #E2F0F6;
border-radius: 5px;
position: absolute;
width: 40%;
height: 60%;
margin: 17px;
border: 9px solid #BF6D7B;
}
.window1 {
left: 0;
border-top-left-radius: 30%;
}
.window2 {
right: 0;
border-top-right-radius: 50%;
}
.car-top2 {
border-radius: 100px 200px 0 0;
background-color: #25659C;
*/ border: 10px solid #72252F;
background-color: #9C2535;
max-width: 100%;
width: 430px;
height: 140px;
position: absolute;
bottom: 20%;
}
.road {
width: 250%;
height: 200px;
background-color: #585858;
border-top: 10px solid #756D6D;
border-bottom: 20px solid #756D6D;
position: absolute;
bottom: 0%;
margin-left: -10px;
padding: 0;
}
.road::before {
content: " ";
position: absolute;
z-index: 0;
top: -17px;
left: 0px;
right: 0px;
border: 5px solid black;
}
.road-top-half {
height: 15px;
width: 250%;
position: absolute;
left: -10%;
top: 30px;
border-top: 40px dashed white;
margin-top: 25px;
animation: road-moving 10s infinite linear;
transition: all 3s linear;
}
.skyline {
width: 100%;
position: absolute;
bottom: 205px;
padding: 0;
left: 110%;
animation: road-moving 10s infinite linear;
transition: all 8s linear;
}
.building1 {
width: 220px;
height: 450px;
background-color: #211919;
position: relative;
}
.building1-shadow {
border-top: 15px solid transparent;
border-right: 60px solid rgb(44, 37, 37);
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
height: 450px;
width: 200px;
position: absolute;
left: -199px;
}
.building-left-half,
.building-right-half {
height: 300px;
width: 50px;
position: absolute;
top: 10px;
border-left: 16px dashed #A9D2C7;
border-right: 16px dashed rgba(255, 255, 0, 0.19);
margin-top: 25px;
}
.building-left-half {
left: 10px;
padding: 25px;
}
.building-right-half {
right: 10px;
padding: 20px;
}
.moon {
height: 100px;
width: 100px;
border-radius: 50%;
background: rgb(207, 207, 212);
margin: auto;
box-shadow: 0 0 60px gold, 0 0 100px rgb(185, 160, 24), inset 0 5px 12px 26px #F5F5F5, inset -2px 8px 15px 36px #E6E6DB;
transition: 1s;
transition: 1s;
right:370px;
top: 30px;
position: absolute;
animation: sun-moon 40s 2s linear infinite;
transform-origin: 50% 500px;
}

/*Headlights*/
.car-top1:after {
width: 13px;
height: 37px;
background-color: #BACCDA;
position: absolute;
bottom: -63px;
right: -168px;
z-index: 10;
content: " ";
border-radius: 10px;
border: 2px solid black;
border-left-style: none;
transform: rotate(-15deg);
}

.car-top2:after {
position: absolute;
bottom: 7px;
right: -340px;
content: " ";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 80px solid transparent;
border-right: 500px solid rgba(191,188,87,0.7);
z-index: -1;
-webkit-mask-box-image: -webkit-linear-gradient(left, black, transparent);
-webkit-mask-box-image: -o-linear-gradient(left, black, transparent);
-webkit-mask-box-image: linear-gradient(to right, black, transparent);
transform: rotate(-9deg);
}

0 0
Add a comment
Know the answer?
Add Answer to:
Create an animation of car that starts slowly, then moves fast after coming to a stop...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • 1).  the roller coaster car with a mass of 250 kg starts with an initial speed v0...

    1).  the roller coaster car with a mass of 250 kg starts with an initial speed v0 = 5.6 m/s at the top of the track . What is its speed (in m/s) at the lowest point of the track (which is 25m below the start point)? Keep 2 decimal places. 1 b) Recall what you learned in vertical circular motion. If the lowest part of the track is approximated as circular with a radius of 6.20 m, What is the...

  • Description In this homework, you are asked to implement a multithreaded program that will allow ...

    Description In this homework, you are asked to implement a multithreaded program that will allow us to measure the performance (i.e, CPU utilization, Throughput, Turnaround time, and Waiting time in Ready Queue) of the four basic CPU scheduling algorithms (namely, FIFO, SJE PR, and RR). Your program will be emulating/simulating the processes whose priority, sequence of CPU burst time(ms) and I'O burst time(ms) will be given in an input file. Assume that all scheduling algorithms except RR will be non-preemptive,...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • Using PuTTY Linux Server Task Compiling:             1) Download the two files from blackboard, driver.cpp, and...

    Using PuTTY Linux Server Task Compiling:             1) Download the two files from blackboard, driver.cpp, and circle.h             2) Create a new directory to store the files in             3) Compile the code a) Run the command g++ driver.cpp -o executable_name, this will compile the code both for driver.cpp and the referenced file circle.h note: -o parameter specifies a new name for the executable, if you do not specify the “-o” parameter the default name of the executable is “a.out”...

  • Java How to Program, Early Objects ISBN-13: 9780133813432 Project Name: C2800_Proj1_RaceGame Source File Name: (Submit zip...

    Java How to Program, Early Objects ISBN-13: 9780133813432 Project Name: C2800_Proj1_RaceGame Source File Name: (Submit zip of these) RaceGame.java (contains main) RaceCar.java                                                                                                                                                              RaceGame is a text based car racing game. The user is car #1 and the computer is car #2. A car is drawn using 2 lines. The number on the first line is 1 for the user and 2 for the computer. __/1\__ -O---O- When the car has moved down the track, print underscore’s on the second line...

  • Starbucks after Schultz This activity is important because, as a manager, you must be able to...

    Starbucks after Schultz This activity is important because, as a manager, you must be able to identify your company’s core competency and select an appropriate business-level strategy to optimize its competitive value. The goal of this exercise is to demonstrate your understanding of core competency and business-level strategies by applying these concepts to Starbucks’ recent experience in identifying and regaining its competitive advantage. Read the case below and answer the questions that follow. Case Inspired by Italian coffee bars, Starbucks...

  • Unit 3 Study Resource Meiosis • Process by which diploid cells create haploid cells NOT part...

    Unit 3 Study Resource Meiosis • Process by which diploid cells create haploid cells NOT part of the cell cycle > only some cells ever undergo meiosis During meiosis I, homologous chromosomes line up to allow them to be separated into two new cells o They can become "tangled" during this phase, which leads to crossing-over (rearranging the alleles) O Result of meiosis I is two non-identical haploid cells Meiosis Il looks very similar to mitosis, in that sister chromatids...

  • I need help with my very last assignment of this term PLEASE!!, and here are the instructions: After reading Chapter T...

    I need help with my very last assignment of this term PLEASE!!, and here are the instructions: After reading Chapter Two, “Keys to Successful IT Governance,” from Roger Kroft and Guy Scalzi’s book entitled, IT Governance in Hospitals and Health Systems, please refer to the following assignment instructions below. This chapter consists of interviews with executives identifying mistakes that are made when governing healthcare information technology (IT). The chapter is broken down into subheadings listing areas of importance to understand...

  • Based on the article "Proxy War," create your own argument that either supports or counters the...

    Based on the article "Proxy War," create your own argument that either supports or counters the author's argument (you either agree with the author's conclusion [support his argument] or you disagree with the author's conclusion [counter his argument]). Be sure you are not just developing your argument with the opinion that you already have. This means you must first recognize your initial point of view and your own assumptions about the topic, so you can approach it with an open...

  • After reading the article, answer the questions that follow. Turning Off, Dining In Last night at...

    After reading the article, answer the questions that follow. Turning Off, Dining In Last night at dinner, I suddenly realized that no one around our table had said anything for quite a while. I looked at my son, who had headphones on and whose face was aglow with the white-blue light of this phone on which he was watching a YouTube video. My daughter was also bathed in this same glow, but a tap-tap-tap was coming from her phone as...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT