css3 div跳动动画_超简单css3跳动效果

body{

background:#ccc;

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.box{

height: 50px;

width: 50px;

position: relative;

}

.box::before{

content: '';

height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%;

position: absolute;

top: 67px;

left: 0;

animation: shadow .5s linear infinite;

}

.box::after{

border-radius: 5px;

background: #fff;

animation: rotate .5s linear infinite;

content: '';

position: absolute;

left: 0;

top: 0;

width: 50px;

height: 50px;

}

@keyframes shadow {

0%, 100% {transform: scaleX(1);}

50% {transform: scaleX(1.2);}

}

@keyframes rotate {

0% {

transform: translateY(0) ;

}

25% {

transform: translateY(10px);

}

50% {

transform: translateY(20px) scale(1.1, 0.9);

}

75% {

ransform: translateY(10px) ;

}

100% {

transform: translateY(0) ;

}

}