Question

In: Computer Science

Write an HTML which will create two moving balls (use div with border-radius to create these...

Write an HTML which will create two moving balls (use div with border-radius to create these balls). The red ball starts its movement from top left corner and the green ball starts its movement from top right corner. Assuming the red ball take diagonal direction and the red ball takes anti-diagonal direction downward. When ball meets in the middle of the screen, the red ball will on top of the green ball (hint: use z-inedx). Make sure these two balls will meet in the center of your screen when during their movements. .

Solutions

Expert Solution

<!DOCTYPE html>

<html>

<head>

<title> Some title </title>

<style>

.balls{

border-radius: 50%;

position: fixed;

width: 50px;

height: 50px;

margin-top: 50px;

animation-iteration-count: infinite;

}

#ball1 {

left: 0%;

background : red;

animation-name: redball;

animation-duration: 8s;

animation-iteration-count: infinite;

}

#ball2 {

left: 100%;

background:green;

animation-name: greenball;

animation-duration: 8s;

animation-iteration-count: infinite;

z-index:-1;

}

@keyframes redball {

0% {

top: 0%;

left: 0%;

}

100% {

top : 90%;

left : 90%;

}

@keyframes greenball {

0% {

top : 0%;

left : 90%;

}

100% {

top : 90%;

left : 0%;

}

</style>

</head>

<body>

</body>

</html>

EXPLANATION:

As asked in the question above, the red ball starts its movement from the top left in the diagonal direction and the green ball starts its movement from the top right in the anti-diagonal direction.In the centre of the screen when both the balls meet and they overlap each other, red ball overlaps and be on top of the green ball.

This process is done by the following procedure:-

- open <!DOCTYPE html> , <html> , <head> , <style> tags as we do in our html codes.

- created a class named balls and added the properties that should be included in both the balls.(properties which are common for both).

NOTE : class name is prefixed by " . " by convention.

Added some common properties like width of the ball,height of the ball , radius of the ball

- created two different id's for ball1 and ball2 .

Added some specific properties for both the balls in their id's which shall be given separately like colour of the ball,animation name for the balls.

Note: id's are prefixed by "#" by convention.

- In the #ball2, the z-index is assigned to -1 so that #ball2 is overlaped by #ball1.

An element with greater z-index is always in front of an element with a lower z-index.(so we gave our #ball2 the z-index of -1 which is lower)

-Here is the main thing due to which our balls are moving on the screen: KEYFRAMES

In keyframes we add the position of the ball i.e where should it be on the the screen.

At starting( 0% ) the red ball should be on the top left corner so we made it left:0%; top:0%;

At the end(100%), the red ball should reach the bottom right corner so we made it left:90%; top: 90%;

-Likewise we design our keyframes for green ball also.

-In between the two balls pass by each other and the green ball is overlaped by red ball(as we gave z-index for green ball as -1).

- We open our body tags and div elements which results in the presence of the balls.

Thank you, have a great day!

venereology answered 1 day ago

Next > < Previous

Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window. c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...

Please use HTML and CSS - Create the overlay and popup: Note: this is my original...

Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...

Two charged metal balls of a different size, radius R1 is bigger than R2, and then...

Two charged metal balls of a different size, radius R1 is bigger than R2, and then connected by a wire. Which ball gets the larger charge? What about charge density? Prove the answer.

Write an HTML file for a web page that contains the items below. Use an internal...

Write an HTML file for a web page that contains the items below. Use an internal style sheet to specify all fonts, sizes, colors, and any other aspects of the presentation. Your page should contain the following items: 1) A header with white text on dark green background (just for the header, not the entire page), in Impact font, bold, and centered. 2) Two paragraphs of text, each with dark gray text in Tahoma font, on a light blue background,...

Que1.Consider two balls of identical mass. If ball 1 is moving to the right towards stationary...

Que1.Consider two balls of identical mass. If ball 1 is moving to the right towards stationary ball 2 at 1.0 m/s and the two balls collide elastically, what will the final velocities of both balls be? (Hint: consider this simulation.) Que 2.If the same two balls again undergo a collision, but this time the collision is inelastic, what will the final velocities of both balls be? Que 3.What are the conditions for elastic and inelastic collisions? Que 4.Explain how the...

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images)...

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images) from this Wikipedia page: https://en.wikipedia.org/wiki/Avatar_(2009_film) Besides the basic HTML document elements, the html document should have the following components or meet the requirements: Use <header><section><nav><article><div><footer> to arrange the layout of the page h1, h2 At least 1 table At least1 image At least 2 links, one link opens the target page with a new window Several paragraphs with formatted text (use at least 3...

A wheel of radius 0.280 m, which is moving initially at 33 m/s, rolls to a...

A wheel of radius 0.280 m, which is moving initially at 33 m/s, rolls to a stop in 215 m. Calculate its linear acceleration.(magnitude only) 2) Calculate its angular acceleration.(magnitude only) 3)The wheel's rotational inertia is 0.195 kg* m2 about its central axis. Calculate the torque exerted by the friction on the wheel, about the central axis.(N*m) (magnitude only)

Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...

Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...

Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an...

Please Use JavaScript and HTML 5) Number guesser (easier) Create a number guessing name, using an input and a button to gather a number. The number to be guessed should be a hard-coded whole number between 1 and 20. Tell the user if the number is too high, equal to, or too low than a number you have hard-coded in your application. Remove the text in the input when the user clicks the button.

Subjects