css模块上下移动循环,动画动效

.jt_img .jt{
    position:relative;
    animation: example 1s infinite linear;
}

@keyframes example {
    0% {transform: translateY(0);}
    25% {transform: translateY(-10px);}
    50% {transform: translateY(0);}
    75% {transform: translateY(10px);}
    100% {transform: translateY(0);}
}

首先给要加动效的盒子 / 图片加上

position:relative;
animation: example 1s infinite linear;

这两句,注意 example 是和下面动画效果对应的

@keyframes example

然后使用循环来上下移动这个元素

你可能感兴趣的:(css,前端)