css 弹跳球动画

Posted 2021-05-13

/* Bouncing Ball Animation */
#bouncing-ball {
    width: 400px;
    height: 400px;
    /*margin: auto;*/
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: -260px;
}
#ball {
    border-radius: 50%;
    background-color: #AAA;
    position: absolute;
    left: 50%;
    z-index: 2;
    display: none;
    border: 1px solid #999;
    color: white;
    font-size: 2em;
    line-height: 77px;
    /* Gradient generated from http://colorzilla.com/gradient-editor/#6dbbff+0,2971b2+100 */
    background: #6dbbff; /* Old browsers */
    background: -webkit-linear-gradient(#6dbbff 0%, #2971b2 100%);
    background: -o-linear-gradient(#6dbbff 0%, #2971b2 100%);
    background: linear-gradient(#6dbbff 0%, #2971b2 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dbbff', endColorstr='#2971b2',GradientType=0 ); /* IE6-9 */
}
#ball:hover {
  /* http://colorzilla.com/gradient-editor/#2971b2+0,6dbbff+100 */
  background: #2971b2; /* Old browsers */
  background: -webkit-linear-gradient(#2971b2 0%, #6dbbff 100%);
  background: -o-linear-gradient(#2971b2 0%, #6dbbff 100%);
  background: linear-gradient(#2971b2 0%, #6dbbff 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2971b2', endColorstr='#6dbbff',GradientType=0 ); /* IE6-9 */
}
#ball span {
  padding: 0;
  margin: 0;
}
#shadow {
    border-radius: 50%;
    background-color: #CCC;
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 1;
    display: none;
}
/* End Bouncing Ball Animation */
/* SPECIAL FOR BOUNCING BALL */
@media only screen and (min-width: 100px) and (max-width: 299px){
  #bouncing-ball, #ball, #shadow {
    margin-left: -68px !important;
    margin-top: 0px !important;
  }
}
@media only screen and (min-width: 300px) and (max-width: 350px){
  #bouncing-ball, #ball, #shadow {
    margin-left: -55px !important;
    margin-top: 0px !important;
  }
}
@media only screen and (min-width: 351px) and (max-width: 400px){
  #bouncing-ball, #ball, #shadow {
    margin-left: -50px !important;
    margin-top: 0px !important;
  }
}
@media only screen and (min-width: 401px) and (max-width: 450px){
  #bouncing-ball, #ball, #shadow {
    margin-left: -30px !important;
    margin-top: 30px !important;
  }
}
@media only screen and (min-width: 451px) and (max-width: 557px){
  #bouncing-ball, #ball, #shadow {
    margin-top: -225px !important;
  }
}
@media only screen and (min-width: 558px) and (max-width: 611px){
  #bouncing-ball, #ball, #shadow {
    margin-top: -235px !important;
  }
}
@media only screen and (min-width: 612px) and (max-width: 700px){
  #bouncing-ball, #ball, #shadow {
    margin-top: -250px !important;
  }
}
/* END BOUNCING BALL */