本篇文章再给大家分享6种css3的页面加载动画。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
在之前的文章【CSS3学习之页面加载动画（三）】中又分享了6个CSS3的加载动画，今天继续分享（标题接上一次），图片看得不真切。
十七、效果十七
三个小球，纵向居中，间距撑开，依次改变小球的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; }
登录后复制
今天的分享结束，后面还会有一波，撒花完结。希望能对大家的学习有所帮助，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap教程！
以上就是CSS3学习之页面加载动画（四）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2890423.html
