Soru & Cevap

javascript te animasyon

02.12.2016 - 06:57

 bir HTML sayfasında Fare ile işaretlenen yerden bir top –fizikteki serbest düşme hareketi
kurallarına göre- aşağıya doğru artan bir hızla düşmeli ve zemin olarak belirlenen yerde
duracak bunu nasıl yapabilirim yardımlarınızı bekliyorum

48 Görüntülenme

1 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

picture-124606-1543930838.png
banuerkocc
02.12.2019 - 12:39

<div id="ball"></div>
<div id="ground"></div>
<div id="shadow"></div>

 

 

body {
  background: #202020;
}

#ground {
  position: absolute;
  background: #ad8766;
  top: 18em;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

#shadow {
  position: absolute;
  top: 19em;
  left: 50%;
  margin-left: -1em;
  width: 2em;
  height: 1em;
  background: #111;
  border-radius: 50%;
  -webkit-animation:   pulse .5s infinite alternate;
  -moz-animation:     pulse .5s infinite alternate;
  -o-animation:       pulse .5s infinite alternate;
  animation:          pulse .5s infinite alternate;
}

@-webkit-keyframes pulse {
  0% { width: 2em; margin-left: -1em; }
  75% { width: 2.5em; margin-left: -1.25em; }
  100% { width: 3em; margin-left: -1.5em; }
}
@-webkit-keyframes pulse {
  0% { width: 2em; margin-left: -1em; }
  75% { width: 2.5em; margin-left: -1.25em; }
  100% { width: 3em; margin-left: -1.5em; }
}
@-moz-keyframes pulse {
  0% { width: 2em; margin-left: -1em; }
  75% { width: 2.5em; margin-left: -1.25em; }
  100% { width: 3em; margin-left: -1.5em; }
}
@-o-keyframes pulse {
  0% { width: 2em; margin-left: -1em; }
  75% { width: 2.5em; margin-left: -1.25em; }
  100% { width: 3em; margin-left: -1.5em; }
}
@keyframes pulse {
  0% { width: 2em; margin-left: -1em; }
  75% { width: 2.5em; margin-left: -1.25em; }
  100% { width: 3em; margin-left: -1.5em; }
}

#ball {
  position: relative;
  background: #f7f7f7;
  top: 3em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 2;
  -webkit-animation: bounce .5s cubic-bezier(.63,.09,.75,.46) infinite alternate;
  -moz-animation:    bounce .5s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  -o-animation:      bounce .5s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  animation:         bounce .5s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
}

@-webkit-keyframes bounce {
  0%, 10% { top: 3em; height: 3em; width: 3em; }
  15% { height: 3.15em; width: 2.9em; }
  35% { height: 4em; width: 2.5em; }
  75% { height: 4em; width: 2.5em; }
  95% { height: 2em; width: 3.5em; }
  100% { top: 18em; height: 1em; width: 3em; }
}
@-moz-keyframes bounce {
  0%, 10% { top: 3em; height: 3em; width: 3em; }
  15% { height: 3.15em; width: 2.9em; }
  35% { height: 4em; width: 2.5em; }
  75% { height: 4em; width: 2.5em; }
  95% { height: 2em; width: 3.5em; }
  100% { top: 18em; height: 1em; width: 3em; }
}
@-o-keyframes bounce {
  0%, 10% { top: 3em; height: 3em; width: 3em; }
  15% { height: 3.15em; width: 2.9em; }
  35% { height: 4em; width: 2.5em; }
  75% { height: 4em; width: 2.5em; }
  95% { height: 2em; width: 3.5em; }
  100% { top: 18em; height: 1em; width: 3em; }
}
@keyframes bounce {
  0%, 10% { top: 3em; height: 3em; width: 3em; }
  15% { height: 3.15em; width: 2.9em; }
  35% { height: 4em; width: 2.5em; }
  75% { height: 4em; width: 2.5em; }
  95% { height: 2em; width: 3.5em; }
  100% { top: 18em; height: 1em; width: 3em; }
}

 

 

Bu bir serbest düşüş örneğidir. javascript için animasyon kütüphanelerini kullanabilirsiniz.