Physics, asked by kg202069, 1 year ago

also represent the data in the form of graph distance travelled by the ball in different time interval suppose 1s,2s,3s​

Answers

Answered by Anonymous
3



&lt;!DOCTYPE html&gt;<br /><br />&lt;html&gt;<br /><br />&lt;head&gt;<br /><br />&lt;title&gt;Rain&lt;/title&gt;<br /><br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /><br />&lt;div class="container"&gt;<br /><br />&lt;div class="rain"&gt;<br /><br />&lt;div class="drop"&gt;&lt;/div&gt;<br /><br />&lt;div class="waves"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="splash"&gt;&lt;/div&gt;<br /><br />&lt;div class="particles"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="rain"&gt;<br /><br />&lt;div class="drop"&gt;&lt;/div&gt;<br /><br />&lt;div class="waves"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="splash"&gt;&lt;/div&gt;<br /><br />&lt;div class="particles"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="rain"&gt;<br /><br />&lt;div class="drop"&gt;&lt;/div&gt;<br /><br />&lt;div class="waves"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="splash"&gt;&lt;/div&gt;<br /><br />&lt;div class="particles"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="rain"&gt;<br /><br />&lt;div class="drop"&gt;&lt;/div&gt;<br /><br />&lt;div class="waves"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;div class="splash"&gt;&lt;/div&gt;<br /><br />&lt;div class="particles"&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;div&gt;&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;/div&gt;<br /><br />&lt;style&gt;<br /><br />html{<br /><br />height: 300px;<br /><br />}<br /><br />body{<br /><br />height: 100%;<br /><br />margin: 0px;<br /><br />display: flex;<br /><br />justify-content: center;<br /><br />align-items: center;<br /><br />background-color: black;<br /><br />}<br /><br />.container{<br /><br />width: 100%;<br /><br />height: 100%;<br /><br />min-width: 600px;<br /><br />max-width: 800px;<br /><br />max-height: 500px;<br /><br />display: grid;<br /><br />grid-template-columns: repeat(3, 1fr);<br /><br />grid-template-rows: repeat(3, 1fr);<br /><br />}<br /><br />.row{<br /><br />display: flex;<br /><br />justify-content: center;<br /><br />align-items: center;<br /><br />}<br /><br />.rain{<br /><br />position: relative;<br /><br />width: 100%;<br /><br />height: 100%;<br /><br />}<br /><br />.rain:nth-of-type(1){<br /><br />--duration: 2.7s;<br /><br />--delay: 1s;<br /><br />transform: translate(10%, 10%) scale(0.9);<br /><br />}<br /><br />.rain:nth-of-type(2){<br /><br />--duration: 2.1s;<br /><br />--delay: 1.2s;<br /><br />transform: translate(-20%, 40%) scale(1.3);<br /><br />}<br /><br />.rain:nth-of-type(3){<br /><br />--duration: 2.3s;<br /><br />--delay: 2s;<br /><br />transform: translate(0%, 50%) scale(1.1);<br /><br />}<br /><br />.rain:nth-of-type(4){<br /><br />--duration: 2s;<br /><br />--delay: 4s;<br /><br />transform: translate(0%, -10%) scale(1.2);<br /><br />}<br /><br />@keyframes fall{<br /><br />0%{<br /><br />transform: translateY(-120vh);<br /><br />}<br /><br />45%{<br /><br />transform: translateY(0%);<br /><br />opacity: 1;<br /><br />}<br /><br />46%{<br /><br />opacity: 0;<br /><br />}<br /><br />100%{<br /><br />opacity: 0;<br /><br />}<br /><br />}<br /><br />.waves &gt; div{<br /><br />position: absolute;<br /><br />top:0px;<br /><br />left: 0px;<br /><br />right: 0px;<br /><br />bottom: 0px;<br /><br />border-radius: 50%;<br /><br />border: solid white 3px;<br /><br />animation-name: spread;<br /><br />animation-duration: var(--duration);<br /><br />animation-delay: var(--delay);<br /><br />animation-iteration-count: infinite;<br /><br />animation-timing-function: ease-out;<br /><br />animation-fill-mode: backwards;<br /><br />}<br /><br />.waves &gt; div:nth-child(2){<br /><br />animation-delay: calc(var(--delay) + 0.3s);<br /><br />animation-timing-function: linear;<br /><br />}<br /><br />@keyframes spread{<br /><br />0%{<br /><br />transform: scale(0);<br /><br />opacity: 1;<br /><br />}<br /><br />40%{<br /><br />transform: scale(0);<br /><br />opacity: 1;<br /><br />}<br /><br />100%{<br /><br />transform: scale(1);<br /><br />opacity: 0;<br /><br />}<br /><br />}<br /><br />.splash{<br /><br />position: absolute;<br /><br />top: 10%;<br /><br />bottom: 50%;<br /><br />left: 35%;<br /><br />right: 35%;<br /><br />border-radius: 8px;<br /><br />clip-path: polygon(7% 100%, 5% 95%, 3% 80%, 11% 50%, 17% 38%, 23% 44%, 30% 53%, 37% 28%, 40% 29%, 45% 43%, 51% 53%, 59% 36%, 64% 22%, 67% 23%, 70% 34%, 72% 46%, 79% 37%, 83% 37%, 93% 61%, 96% 76%, 96% 94%, 94% 100%);<br /><br />background-color: white;<br /><br />transform-origin: bottom;<br /><br />animation-name: splash;<br /><br />animation-duration: var(--duration);<br /><br />animation-delay: var(--delay);<br /><br />animation-iteration-count: infinite;<br /><br />animation-timing-function: ease-out;<br /><br />animation-fill-mode: backwards;<br /><br />}<br /><br />@keyframes splash{<br /><br />0%{<br /><br />transform: scale(0.3, 0);<br /><br />}<br /><br />49%{<br /><br />transform: scale(0.3, 0);<br /><br />}<br /><br />50%{<br /><br />transform: scale(0.3, 0.3);<br /><br />}<br /><br />60%{<br /><br />transform: scale(0.7, 1);<br /><br />}<br /><br />90%{<br /><br />transform: scale(1, 0);<br /><br />}<br /><br />100%{<br /><br />transform: scale(1, 0);<br /><br />}<br /><br />}<br /><br />.particles &gt; div{<br /><br />position: absolute;<br /><br />border-radius: 100%;<br /><br />background-color: white;<br /><br />animation-duration: var(--duration);<br /><br />animation-delay: var(--delay);<br /><br />animation-iteration-count: infinite;<br /><br />animation-timing-function: ease;<br /><br />animation-fill-mode: backwards;<br /><br />}<br /><br />.particles &gt; div:nth-child(1){<br /><br />width: 7px;<br /><br />height: 7px;<br /><br />top: 50%;<br /><br />left: 50%;<br /><br />animation-name: jumpLeft;<br /><br />}<br /><br />.particles &gt; div:nth-child(2){<br /><br />width: 5px;<br /><br />height: 5px;<br /><br />top: 30%;<br /><br />left: 50%;<br /><br />animation-name: jumpLeft;<br /><br />animation-delay: calc(var(--delay) + 0.1s);<br /><br />}<br /><br />.particles &gt; div:nth-child(3){<br /><br />width: 3px;<br /><br />height: 3px;<br /><br />top: 20%;<br /><br />left: 70%;<br /><br />animation-name: jumpRight;<br /><br />animation-delay: calc(var(--delay) + 0.15s);<br /><br />}<br /><br />.particles &gt; div:nth-child(4){<br /><br />width: 5px;<br /><br />height: 5px;<br /><br />top: 30%;<br /><br />left: 50%;<br /><br />animation-name: jumpRight;<br /><br />animation-delay: calc(var(--delay) + 0.3s);<br /><br />}<br /><br />@keyframes jumpLeft{<br /><br />0%{<br /><br />transform: translate(0,0) scale(0);<br /><br />}<br /><br />45%{<br /><br />transform: translate(0,0) scale(0);<br /><br />}<br /><br />60%{<br /><br />transform: translate(-50px, -90px) scale(1);<br /><br />}<br /><br />100%{<br /><br />transform: translate(-60px, 0px) scale(0.1);<br /><br />}<br /><br />}<br /><br />@keyframes jumpRight{<br /><br />0%{<br /><br />transform: translate(0,0) scale(0);<br /><br />}<br /><br />45%{<br /><br />transform: translate(0,0) scale(0);<br /><br />}<br /><br />60%{<br /><br />transform: translate(30px, -80px) scale(1);<br /><br />}<br /><br />100%{<br /><br />transform: translate(50px, 0px) scale(0.1);<br /><br />}<br /><br />}<br /><br />&lt;/style&gt;<br /><br />&lt;/bold&gt;<br /><br />&lt;/html&gt;
Similar questions
Math, 1 year ago