CSS3动画：5种预载动画效果实例
发布时间：2017-04-05 17:11:51 作者：风雨后见彩虹 
我要评论
我要评论本篇文章主要介绍了CSS3动画：5种预载动画效果实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实现如图所示的动画效果：
预载动画一：双旋圈
在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。
实现如图所示：
html代码：
<body style="background: #ffb83c;">
<div id="preloader-1">
<span></span>
<span></span>
</div>
</body>
css代码：
#preloader-1{
position: relative;
}
#preloader-1 span{
position: absolute;
border:8px solid #fff;
border-top:8px solid transparent;
border-radius: 999px;
}
#preloader-1 span:nth-child(1){
width:80px;
height: 80px;
animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
top:20px;
left:20px;
width:40px;
height: 40px;
animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
0%{transform: rotate(360deg); opacity: 1.0;}
50%{transform: rotate(180deg); opacity: 0.5;}
100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
0%{transform: rotate(0deg); opacity: 0.5;}
50%{transform: rotate(180deg); opacity: 1;}
100%{transform: rotate(360deg);opacity: 0.5;}
}
预载动画二：交错圈
两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
效果：
html代码：
<body style="background: #4ad3b4;">
<div id="preloader-2">
<span></span>
<span></span>
</div>
</body>
css代码：
#preloader-2{
position: relative;
}
#preloader-2 span{
position: absolute;
width:30px;
height: 30px;
background: #fff;
border-radius: 999px;
}
#preloader-2 span:nth-child(1){
animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
0%{transform: translateX(0); opacity: 0.5;}
50%{transform: translateX(80px); opacity: 1;}
100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
0%{transform: translateX(80px); opacity: 0.5;}
50%{transform: translateX(0); opacity: 1;}
100%{transform: translateX(80px);opacity: 0.5;}
}
预载动画三：旋转圈
效果：
html代码：
<body style="background: #ab69d9;">
<div id="preloader-3">
<span></span>
</div>
</body>
css代码：
#preloader-3{
position: relative;
width:80px;
height: 80px;
border:4px solid rgba(255,255,255,.25);
border-radius: 999px;
}
#preloader-3 span{
position: absolute;
width:80px;
height:80px;
border:4px solid transparent;
border-top:4px solid #fff;
border-radius: 999px;
top:-4px;
left:-4px;
animation: rotate 1s infinite linear;
}
@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
预载动画四：跳动圈
这是一种墨西哥波浪纹的动画效果，通过设置不同圆圈之间的延迟参数来实现。
效果：
html代码：
<body style="background: #c1d64a;">
<div id="preloader-4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
css代码：
#preloader-4{
position: relative;
}
#preloader-4 span{
position:absolute;
width:16px;
height: 16px;
border-radius: 999px;
background: #fff;
animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
left:0;
animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
left:20px;
animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
left:40px;
animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
left:60px;
animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
left:80px;
animation-delay: 1.0s;
}
@keyframes bounce{
0%{transform: translateY(0px);opacity: 0.5;}
50%{transform: translateY(-30px);opacity: 1.0;}
100%{transform: translateY(0px);opacity: 0.5;}
}
预载动画五：雷达圈
一种雷达辐射效果，给3个span elements设置相同的淡入淡出效果，再予每个稍微延迟下即可实现。
效果：
html代码：
<body style="background: #f9553f;">
<div id="preloader-5">
<span></span>
<span></span>
<span></span>
</div>
</body>
css代码：
#preloader-5{
position: relative;
}
#preloader-5 span{
position:absolute;
width:50px;
height: 50px;
border:5px solid #fff;
border-radius: 999px;
opacity: 0;
animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
animation-delay: 1.33s;
}
@keyframes radar{
0%{transform: scale(0);opacity: 0;}
25%{transform: scale(0);opacity: 0.5;}
50%{transform: scale(1);opacity: 1.0;}
75%{transform: scale(1.5);opacity: 0.5;}
100%{transform: scale(2);opacity: 0;}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
css3 svg实现的三角形图标变换loading加载动画特效源码
这是一款基于css3 svg实现的三角形图标变换loading加载动画特效源码。画面中央呈现出彩色三角形层叠放大效果，图形外边缘三角形放大后逐渐消失，同时图形中心不断出现新的2017-08-31
15种HTML5和CSS3炫酷彩色loading加载动画特效
这是一套HTML5和CSS3炫酷彩色loading加载动画特效，共15种特效，通过div盒子或svg元素，配合CSS3来制作，简单炫酷2017-07-28
这是一款基于纯css3实现多个线性旋转加载动画特效源码。界面中3个弧线呈现出围绕中心单独旋转的动画效果2017-07-04
这是一组使用CSS3制作的波形loading动画特效，共有11种波形动画，简单炫酷，需要的朋友可下载试试2017-06-22
CSS3实现的15种二级下拉导航加载动画特效源码是一段实现了15种响应时二级菜单导航加载动画效果，当鼠标放在一级菜单导航时，二级菜单会响应动画加载，本段代码适应于所有网2017-06-02
本代码是一组效果非常炫酷的CSS3页面预加载loading动画特效源码，当点击页面的任何一个地方时，loading动画就会被隐藏2017-05-24
这是一款基于纯css3实现的3D积木方块加载动画特效源码。画面上的9个方块呈现出3D排列并且不断的上下浮动效果。2017-05-10
CSS3实现的创意loading加载动画特效源码是一段实现了非常有创意效果的loading加载动画效果的代码，本段代码适应于所有网页使用，有需要的朋友们欢迎前来下载使用2017-05-04
这是一款css3 svg实现的气泡加载动画特效源码。画面上的小气泡围绕着中心的大气泡做有规律的整体旋转运动2017-04-12
纯CSS3仿Skype圆点旋转加载动画特效源码是一款loader登录界面加载动画，圆点旋转加载动画。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用2017-12-18
最新评论