CSS3怎么实现页面加载动画
这篇文章主要介绍"CSS3怎么实现页面加载动画"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"CSS3怎么实现页面加载动画"文章能帮助大家解决问题。
一次完整运动分为四个阶段：第一个阶段，左上移动至右上，旋转90°，宽高缩小；第二个阶段，右上移动至右下，旋转180°，宽高回复；第三个阶段，右下移动至左下，旋转270°，宽高缩小；第四个阶段，左下移动至左上，旋转360°，宽高回复。
动画延迟时间差为负的半个动画时间。
{animation:party_ball2seaseinfinite;}
@keyframesparty_ball{
25%{
-webkit-transform:scale(.5)rotateZ(90deg);
transform:scale(.5)rotateZ(90deg);
top:0;
left:100%;
}
50%{
-webkit-transform:scale(1)rotateZ(180deg);
transform:scale(1)rotateZ(180deg);
top:100%;
left:100%;
}
75%{
-webkit-transform:scale(.5)rotateZ(270deg);
transform:scale(.5)rotateZ(270deg);
top:100%;
left:0;
}
100%{
-webkit-transform:scale(1)rotateZ(360deg);
transform:scale(1)rotateZ(360deg);
top:0;
left:0;
}
}
关于"CSS3怎么实现页面加载动画"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。
