#yyds干货盘点#CSS实现漂浮效果

1.效果展示

2.代码

.box {
    width: 100px;
    height: 100px;
    background: #fb3;
    border-radius: 50%;
    animation: heart 1.3s linear infinite alternate;
}

@keyframes heart {
    from {
        transform: translate(0, 0)   /*可以不需要*/
    }

    to {
        transform: translate(0, 6px)
    }
}


/*使用margin-top 会卡顿*/
/* @keyframes heart {
    from {
        margin-top: 0px;
    }

    to {
        margin-top: -6px;
    }
} */

3.注意