13518219792
这篇文章给大家分享的是CSS3实现页面加载动画的方法，相信大部分人都还没学会这个技能，为了让大家学会，给大家总结了以下内容，话不多说，一起往下看吧。
创新互联是一家专业提供哈尔滨企业网站建设,专注与成都做网站、成都网站制作、H5页面制作、小程序制作等业务。10年已为哈尔滨众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
十七、效果十七
三个小球，纵向居中，间距撑开，依次改变小球的translateY的值即可。
@keyframes leap_ball {
50% {
transform: translateY(60px);
}
}十八、效果十八
三个小球，横纵方向上均居中，通过外边距撑开小球之间的距离，从效果上看是左右两边的两个小球在围绕中间小球做环绕运动，那么我们可以直接让小球的父元素来旋转，来达到两边小球的环绕效果（父元素旋转的时候，因为圆形，所以中间小球看不出是在旋转，并且中间的位置也不会改变，从视觉上看，中间小球没有做任何变化）。
@keyframes wind_ball {
50% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(360deg);
}
}十九、效果十九
一共五个小球，每一个小球执行的动画都一样，只是每个小球的动画延迟时间不同，而使小球的位置不同，将五个小球定位至同一个位置作为统一起点（这里，我是将五个小球统一定位至最右边）
{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
80% {
right: 75%; //到达终点，开始返回起点 }
}
@keyframes cool_ballS {
80% { //到达终点
top: 25%;
width: 20px;
height: 20px;
}
81% { //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
top: 0;
width: 25px;
height: 15px;
}
99% { //到达起点
top: 0;
width: 25px;
height: 15px;
}
100% { //恢复初始
width: 20px;
height: 20px;
}
}二十、效果二十
共八个小球，定位围成一个圆，改变小球的宽度、高度即可（要保持小球改变的是以小球的圆心为基准）
{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
50% {
height: 0;
width: 0;
}
80% {
height: 0;
width: 0;
}
}（50%-80%小球维持宽度、高度保持0，形成了一半显示，一半隐藏的效果）
二十一、效果二十一
一共三个小球，每个小球的运动轨迹依然是相同的，这里，我将三个小球的中心定位到纵向顶部，横向中心，然后分三个阶段，先运动到右下角，再到左下角，最后返回起点。
（在每一个阶段接近中间的时间点，加上了透明度的改变）
@keyframes triangle_ball {
16% {
opacity: .6;
}
33% {
left: 100%;
top: 100%;
opacity: 1;
}
50% {
opacity: .6;
}
66% {
left: 0;
top: 100%;
opacity: 1;
}
83% {
opacity: .6;
}
99% {
top: 0;
left: 50%;
opacity: 1;
}
}二十二、效果二十二
这类似于一个旋转的齿轮，关键是如何做出一个齿轮的形状来，一个p给实现边框做里面的圆，给p的伪类虚线边框做外面的锯齿，伪类的边框越宽，锯齿越稀松，反之，越密集。
做出来齿轮了，就剩下旋转的小case了。
.gear_ball {
height: 60px;
width: 60px;
border-radius: 50%;
display: inline-block;
border: 4px #fff solid;
position: relative;
}
.gear_ball:after {
content: '';
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
top: -8px;
left: -8px;
border: 8px #fff dashed;
}看完这篇文章，你们学会CSS3实现页面加载动画的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。
