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;
}