CSS3,加载动画,CSS3动画
web前端-css教程
本篇文章再给大家分享6种css3的页面加载动画。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。微博营销网站源码,ubuntu文件修改操作,同时启动2个tomcat,小白爬虫工具,php变量类型强制转换,大兵 seolzw
前文【CSS3学习之页面加载动画（二）】中又分享了6个CSS3的加载动画，今天继续分享（标题接上一次），图片看得不真切。android 来电响铃源码,vscode怎么重置模板设置,ubuntu 主机名修改,tomcat 建站,xls sqlite,网页设计与网站制作,php 注册 数据库,阿里云服务器虚拟主机,一键转载插件,drf 前端框架,画爬爬虫,php 数组拆分,seo最新优化技术,springboot彩色日志,wordpress 获取标签所有文章,bootstrap音乐网站,易语言如何定位网页,bootstrap 模板框架,后台纯净模板,jquery 整站页面,业务管理系统asp源码,光线视频网站程序lzw
十A、效果十一matlab源码之家,vscode跑得慢,ubuntu 终端透明,tomcat应用日志乱码,爬虫 循环,php 教程 推荐,宁夏seo优化网有口皆碑,精美个人网站 带后台,库存软件模板源码lzw
四个小球分别包含于四个正方形p，将小球相对于正方形定位（top：0；left：0），将方形p设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动
{animation: flor_move 1s 0s ease infinite;}@keyframes flor_move { 50%{ top: 25px; left: 25px; } }还剩下一个旋转的效果，这个便交给方形p的父级元素
{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote { 25%{ transform: rotateZ(90deg); } 50%{ transform: rotateZ(180deg); } 75%{ transform: rotateZ(270deg); } 100%{ transform: rotateZ(360deg); } }十B、效果十二
这个效果实现起来不难，将九个小球固定好位置，改变小球透明度即可（每个小球要设置不一样动画时间）
@keyframes mar_ligt { 50%{ opacity: 0.4; } }十C、效果十三
还是九个小球，不过这里改变了小球的大小，为了防止因为改变大小而致使排版错乱，所以每个小球都包含在固定宽高的p中，使小球在p中横纵方向上时刻居中。这样就可以放心地改变小球的大小了（每个小球依然设置不同的动画时间）
@keyframes mar_ligts { 50%{ transform: scale(.5); opacity: 0.4; } }十D、效果十四
撞球效果，四个小球横纵方向居中排列，中间两个小球不动，左右两边的小球分别向两边来回移动（注意运动的时间差即可）。
{animation: poolball_l 1s .5s linear infinite;} //左边的小球{animation: poolball_r 1s 0s linear infinite;} //右边的小球@keyframes poolball_l { 25%{ transform: translateX(-100%); } 50%{ transform: translateX(0); } } @keyframes poolball_r { 25%{ transform: translateX(100%); } 50%{ transform: translateX(0); } }十E、效果十五
这是一个很常见的效果，同样的为了防止因为小球大小的改变而使页面排版发生错乱，在小球外面加套一层固定宽高的p。
对每个小球还要设置动画延迟
{animation: size_change 1.2s linear infinite;}@keyframes size_change { 20%{ width: 0; height: 0; } 40%{ width: 0; height: 0; } 50%{ width: 20px; height: 20px; } }十F、效果十六
五个小球，只需横向居中，通过外边距来撑开小球之间的距离，通过关键帧动画改变小球的translateY、以及宽高和透明度。
小球初始宽高为15px，透明度为.6。
{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP { 50%{ transform: translateY(60px); } } @keyframes flip_ballS { 50%{ height: 15px; width: 15px; opacity: 0.6; } 75%{ height: 20px; width: 20px; opacity: 1; } }未完待续！
今天就分享到这里，后面还会有补充。希望能对大家的学习有所帮助，更多相关教学请访问 CSS基础视频教学， CSS3视频教学，bootstrap教学！