实现如图所示的动画效果：

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个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:;}

}

@keyframes spin-2{

    0%{transform: rotate(0deg); opacity: 0.5;}

    50%{transform: rotate(180deg); opacity:;}

    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:;}

    100%{transform: translateX(0);opacity: 0.5;}

}

@keyframes cross-2{

    0%{transform: translateX(80px); opacity: 0.5;}

    50%{transform: translateX(0); opacity:;}

    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:;

    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:;

    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:;}

    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:;}

}

CSS3效果：5种预载动画效果的更多相关文章

  1. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  2. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  3. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  4. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

  5. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  6. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  7. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  8. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  9. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

随机推荐

  1. 线性插值法的原理和python代码实现

    假设我们已知坐标 (x0, y0) 与 (x1, y1),要得到 [x0, x1] 区间内某一位置 x 在直线上的值.根据图中所示,我们得到 由于 x 值已知,所以可以从公式得到 y 的值 已知 y  ...

  2. Kubernetes 笔记 03 扫清概念

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  3. 分布式作业 Elastic Job 如何动态调整？

    前面分享了两篇分布式作业调度框架 Elastic Job 的介绍及应用实战. ElasticJob-分布式作业调度神器 分布式作业 Elastic Job 快速上手指南! Elastic Job 提供 ...

  4. node-sqlite3 学习笔记

    * 使用sqlite3持久化数据 * 需求:把一个数组中的每个对象,每个对象中的属性,存到xxx.db文件中去,像数据库一样的去操作它 * 功能:1. 创建数据库(数据库存在的话,那就直接打开) * ...

  5. Xamarin.Android 解决打开软键盘导致底部菜单上移问题

    在界面布局中有EditText控件,该控件一旦获取焦点则打开软键盘,如果布局中有底部菜单,那么底部菜单可能会被软键盘顶在其上面,看如下效果: 解决方法:在活动绑定界面之前写上下段代码即可 Window ...

  6. tensorflow 1.0 学习：参数和特征的提取

    在tf中,参与训练的参数可用 tf.trainable_variables()提取出来,如: #取出所有参与训练的参数 params=tf.trainable_variables() print(&q ...

  7. html标签详解（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  8. 为hexo博客添加基于gitment评论功能

    关于gitment gitment其实就是利用你的代码仓库的Issues,来实现评论.每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论.如果你是用git ...

  9. 为什么阿里巴巴禁止开发人员使用isSuccess作为变量名

    答曰,是为了防止用加了is前缀命名的变量造成序列化与反序列不一致的问题

  10. ES6 系列之私有变量的实现

    前言 在阅读 <ECMAScript 6 入门>的时候,零散的看到有私有变量的实现,所以在此总结一篇. 1. 约定 实现 class Example { constructor() { t ...