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

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个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. 吴恩达机器学习笔记45-使用支持向量机（Using A SVM）

    本篇我们讨论如何运行或者运用SVM. 在高斯核函数之外我们还有其他一些选择,如:多项式核函数(Polynomial Kernel)字符串核函数(String kernel)卡方核函数( chi-squ ...

  2. Day2:html和css

    Day2:html和css 表格是一种常用的标签,表格结构,做到能够合并单元格. 表格的属性: 属性名 说明 border 设置表格的边框 cellspacing 设置单元格与单元格边框之间的空白间距 ...

  3. 《http权威指南》读书笔记12

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  4. Rpc框架dubbo-client（v2.6.3） 源码阅读（二）

    接上一篇 dubbo-server 之后,再来看一下 dubbo-client 是如何工作的. dubbo提供者服务示例, 其结构是这样的!dubbo://192.168.11.6:20880/com ...

  5. 读《Linux Shell脚本攻略》(第2版) 一遍、二遍体会

    前段时间读完了<Linux Shell脚本攻略>(第2版)这本书,给部分想读这本书的人分享下个人感受. 第一遍体会解读:就像黑夜中的灯塔,指明前进的道路. 推荐指数:强烈推荐. 书中讲解的 ...

  6. 机器学习入门05 - 泛化 (Generalization)

    原文链接:https://developers.google.com/machine-learning/crash-course/generalization 泛化是指模型很好地拟合以前未见过的新数据 ...

  7. Mac OS Eclipse 调试快捷键不好使(失效）的情况

    Eclipse调试使用的F5  F6  F8一直都好用,结果一次调试后忽然不好使. 问题原因,尚未知晓. 解决办法,重启机器.

  8. 微信公众平台开发——为何不能在网页调用微信jsapi？

    说到这问题,相信大部分程序员老手都会轻蔑一笑,当然是跨域导致的啊!但是为了一些小白,我觉得还是很有必要再说一次的. 首先介绍什么是跨域,由于浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本( ...

  9. 使用Docker发布DNC项目

    项目结构 可以忽略中间三个Console项目 ApiCenter 是一个WebAPI项目,引用了NLog.MQ项目 ApiCenter使用5001端口 public static IWebHost B ...

  10. sql server 索引阐述系列八 统计信息

    一.概述 sql server在快速查询值时只有索引还不够,还需要知道操作要处理的数据量有多少,从而估算出复杂度,选择一个代价小的执行计划,这样sql server就知道了数据的分布情况.索引的统计值 ...