[分享]css3抖音动画

抖音是近年来备受欢迎的视频分享App，而其中的许多动画效果也很吸引人。如果你想在自己的网站或项目中也加入类似的动画效果，那么就要学会 CSS3 抖音动画。/ 定义 keyframes / keyfra...

抖音是近年来备受欢迎的视频分享App，而其中的许多动画效果也很吸引人。如果你想在自己的网站或项目中也加入类似的动画效果，那么就要学会 CSS3 抖音动画。

/* 定义 keyframes */

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.3);
    }
    
    100% {
        transform: scale(1);
    }
}


/* 添加样式 */

.element {
    animation: heartBeat 1s infinite;
} 

以上的 CSS 代码实现了一个类似于抖音中心心跳的效果。通过定义名为 heartBeat 的 keyframes，指定元素在不同的时间点的变化，然后将其作为动画样式绑定在元素上。

除此之外，CSS3 抖音动画还包括了一些比较实用的效果，比如抖动、跳动、动画缩放等。如果想要更深入地了解，建议多参考一些相关的教程和案例。