CSS3-loading动画（三）
2024-08-22 02:22:55
分享继续，图片看得不真切
在线演示demo：http://liyunpei.xyz/loading.html
十一、效果十一
四个小球分别包含于四个正方形div，将小球相对于正方形定位（top：0；left：0），将方形div设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动
{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {
%{
top: 25px;
left: 25px;
}
}
还剩下一个旋转的效果，这个便交给方形div的父级元素
{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);
}
}
十二、效果十二
这个效果实现起来不难，将九个小球固定好位置，改变小球透明度即可（每个小球要设置不一样动画时间）
@keyframes mar_ligt {
50%{
opacity: 0.4;
}
}
十三、效果十三
还是九个小球，不过这里改变了小球的大小，为了防止因为改变大小而致使排版错乱，所以每个小球都包含在固定宽高的div中，使小球在div中横纵方向上时刻居中。这样就可以放心地改变小球的大小了（每个小球依然设置不同的动画时间）
@keyframes mar_ligts {
50%{
transform: scale(.5);
opacity: 0.4;
}
}
十四、效果十四
撞球效果，四个小球横纵方向居中排列，中间两个小球不动，左右两边的小球分别向两边来回移动（注意运动的时间差即可）。
{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);
}
}
十五、效果十五
这是一个很常见的效果，同样的为了防止因为小球大小的改变而使页面排版发生错乱，在小球外面加套一层固定宽高的div。
对每个小球还要设置动画延迟
{animation: size_change 1.2s linear infinite;}
@keyframes size_change {
20%{
width:;
height:;
}
40%{
width:;
height:;
}
50%{
width: 20px;
height: 20px;
}
}
十六、效果十六
五个小球，只需横向居中，通过外边距来撑开小球之间的距离，通过关键帧动画改变小球的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:;
}
}
未完待续，明天继续~
最新文章
- 【总结】.Net面试题集锦 (二)
- SqlServer阅读收集
- Fiddler 抓取手机APP数据包
- Maven在Windows上的安装与配置
- c++ 静态持续变量
- SQL Server存储机制
- 全局函数VS成员函数
- jquery点击改变class并toggle
- Java为什么只能单继承？
- Servlet课程0426（十）Servlet如何删除cookie
- Secret 的使用场景 - 每天5分钟玩转 Docker 容器技术（109）
- Excel IF函数怎么用
- Python Web（Django）与SQL SERVER的连接处理
- MySQL无法插入中文的解决方案
- [转]JSOUP 抓取HTTPS/HTTP网页，校验问题
- Android图片采样缩放
- 阿里云CentOS 7无外网IP的ECS访问外网（配置网关服务器）
- SqlServer 凭据
- ArcThemALL！5.1：解压、脱壳、压缩样样精通
- maven 的聚合