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

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个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. docker 简单介绍及基础命令运用

    一.什么是docker? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. 简单的来讲Docker实际上就是一个大型容器.容器是完全使用沙箱机制,相互之间不 ...

  2. 机器学习入门10 - 正则化：简单性(Regularization for Simplicity)

    原文链接:https://developers.google.com/machine-learning/crash-course/regularization-for-simplicity 正则化指的 ...

  3. 机器学习基石笔记：02 Learning to Answer Yes/No、PLA、PA

    原文地址:https://www.jianshu.com/p/ed0aee74523f 一.Perceptron Learning Algorithm (一)算法原理 PLA本质是二元线性分类算法,即 ...

  4. io模块及其API

    模块: io io.StringIO io.BytesIO 所包含API列表: io.StringIO.write: 写入字符 io.StringIO.getvalue: 获取写入的字符 io.Str ...

  5. CMake设置编译参数

    项目中的CMake编译参数一直参照Muduo进行设置. Muduo的CMakeLists.txt中,MAKE_CXX_FLAGS设置较为清晰明了,因此一直在项目中沿用. set(CXX_FLAGS - ...

  6. jquery.jtable的事件

    前景提要最近在使用abp zero框架帮朋友搭建一个工厂管理系统.其中有一块功能的话是通过定时爬虫拉取当日的铝价.铝价展示用的是abp zero框架中土牛写的jquery.jtable,铝价需要根据当 ...

  7. android用OkHttp和okio包通信的坑--气死我了

    今天新建了个项目,想要用用okhttp包来实现Android和tomcat的通信, 于是就根据记忆,把以前可以用的代码复制过来了,然后呢,出现这个.... 图有点大,不知到怎么调小 很莫名其妙,我看了 ...

  8. Ocelot简易教程（五）之集成IdentityServer认证以及授权

    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...

  9. list源码4(参考STL源码--侯捷)：transfer、splice、merge、reverse、sort

    list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...

  10. ArcSDE数据库连接(直连、服务连)与GT_Geometry存储配置图解

    众说周知,ArcSDE空间数据库引擎提供了两种连接数据库的方式.一是服务连接方式,一是直连方式.后者也是Esri所推崇的方式.但是,在客户的生产环境和开发商的开发环境中这两种方式都是有需求的.下面就以 ...