在之前的文章《教你如何使用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 拼接元素
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你
原文地址:css骨架加载动画(css 加载动画)