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

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个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. Go语言复制文件

    需要使用io包的Copy方法 package main import ( "fmt" "io" "os" ) //自己编写一个函数,接收两个 ...

  2. 客户端ip获取蹲坑启示： 不要侥幸

    怎么获取一个客户端ip ? 我想这个问题,在网上遍地都是答案! 而且多半是像下面这样: public static String getIpAddress(HttpServletRequest req ...

  3. 高数复习--什么是DCT

    离散余弦变换(英语:discrete cosine transform, DCT)是与傅里叶变换相关的一种变换,类似于离散傅里叶变换,但是只使用实数.离散余弦变换相当于一个长度大概是它两倍的离散傅里叶 ...

  4. Linux 下 Shell 的自动交互

    在编写脚本的时候经常会遇到这种情况,某些程序的命令执行的之后可能会要求用户进行输入,这个时候就需要一些特殊写法来应对这种问题了.这里参考 这篇文章提到可以使用 delimiter 分界符来解决. 也就 ...

  5. com.javax.servlet 慢慢看完慢慢学完

    1.接口 RequestDispatcher 类说明 定义一个对象,从客户端接收请求,然后将它发给服务器的可用资源 (例如Servlet.CGI.HTML文件.JSP文件).Servlet引擎创 建r ...

  6. Spring Security之动态配置资源权限

    在Spring Security中实现通过数据库动态配置url资源权限,需要通过配置验证过滤器来实现资源权限的加载.验证.系统启动时,到数据库加载系统资源权限列表,当有请求访问时,通过对比系统资源权限 ...

  7. spring3.0框架检测方法运行时间测试(转)

    主要利用了Spring AOP 技术,对想要统计的方法进行横切处理,方法执行前开始计时,方法执行后停止计时,得到计时方法就是该方法本次消耗时间. 步骤: 首先编写自己的Interceptor类来实现M ...

  8. centos 7 linux 安装与卸载 jdk 7

    一.声明 本文采用操作系统版本: Centos 7 Linux 系统 版本源:CentOS-7-x86_64-DVD-1708.iso 官网下载地址:http://isoredirect.centos ...

  9. MongoDB 生产环境笔记

    目录 MongoDB 生产环境笔记 一.vm.zone_reclaim_mode 参数 二.添加 swap 分区 三.设置 swappiness 参数 四.内核和文件系统版本 五.禁用 Transpa ...

  10. Docker 构建映像

    .用docker commit构建映像 .docker run -i -t centos /bin/bash //启动一个容器,启动后默认进入该窗口的bash进程 .yum install -y ep ...