css骨架加载动画(css 加载动画)

在之前的文章《教你如何使用shell脚本快速设置服务器(附代码)》中，我们介绍了如何使用shell脚本快速设置服务器。下面的文章将介绍如何使用CSS实现简单的骨骼动画。让我们看看如何做。

1、背景

有一天，设计师来找我说：“这张愿望卡挂在那里不好看。只需添加动态效果，左右摆动。很简单！”，我想，好吧，提高用户的视觉体验，开始。

十分钟后，不对啊，这左右摆动好假，不像现实中风吹的效果。

注：这里加快了动画的速度和摆动幅度。

.animate-1 {
    animation: swing1 1s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: top center;
}
@keyframes swing1 {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}

冷静思考，为什么这种摆动没有灵魂。于是我拿起工作卡开始摆动，看看真正的摆动效果如何。最后，我突然明白了：现实中的愿望卡（和工作卡一样）在受力时不会整体摆动，而是会根据节点位置分成几个部分，这其实是一个简单的骨骼动画！那么如何实现它呢？

2 、骨骼动画

以这张心愿牌摆动画为例，与大家一起研究如何使用css来实现。

2.1 分离元素

要让动画元素单独运动，首先需要拆分元素。拆分的基础是上述节点，即骨骼动画中所谓的关节。例如，这张愿望卡有两个关节，分别在卡的顶部和卡的底部，所以我们可以拆分三个动画元素：

2.2 拼接元素