c语言上下跳动的小球,CSS实现小球跳动效果

CSS实现小球跳动效果

.bound {

animation-duration: 1s;

}

.ball {

animation-duration: .75s;

}

.dot {

animation-duration: .25s;

}

.dot {

top: 100%;

height: 50%;

width: 50%;

background-color: #fff;

transform: translate(0,-50%);

animation-name: drop;

}

.ball {

top: 100%;

height: 50%;

width: 50%;

transform: translate(0,-50%);

animation-name: drop,roundround;

}

.bound {

top: 0;

animation-name: playalong,roundround;

}

.wrapper {

position: relative;

margin: auto;

width: 100%;

overflow: hidden;

}

.wrapper:before {

content: "";

display: block;

padding-top: 100%;

}

.bound,.ball,.dot {

position: absolute;

margin: auto;

animation-delay: 0;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

animation-play-state: running;

right: 0%;

bottom: 0%;

left: 0%;

border-radius: 50%;

}

body {

margin: 0;

background: black;

}

* {

Box-sizing: border-Box;

}

@keyframes playalong {

from {

height: 100%;

width: 100%;

}

to {

height: 10%;

width: 10%;

}

}

@keyframes roundround {

to {

transform: rotate(360deg);

}

}

@keyframes drop {

to {

top: 0%;

bottom: 80%;

transform: scale(.25);

}

}

@media (orientation: landscape) {

.wrapper {

width: 100vh;

}

}

@media (orientation: portrait) {

.wrapper {

top: 50%;

-ms-transform:translateY(-50%);

-webkit-transform:translateY(-50%);

-moz-transform:translateY(-50%);

-o-transform:translateY(-50%);

transform:translateY(-50%);

}

body{

height:100vh;

}

}

@-ms-viewport {

width: device-width;

}

@viewport {

zoom: 1.0;

width: device-width;

}