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

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个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. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  2. 微信小程序消息通知-打卡考勤

    微信小程序消息通知-打卡考勤 效果: 稍微改一下js就行,有不必要的错误,我就不改了,哈哈! index.js //index.js const app = getApp() // 填写微信小程序ap ...

  3. Core 接口发布报错

    An error occurred while starting the application 提示:启动应用程序时发生错误 这个错误在Startup启动项里面 要找具体的报错位置 如下 这样就可以 ...

  4. Linux 下 pushd，popd，cd- 用法

    一,为何要使用这几个命令? 可能大家会有疑问,为何要使用这几个命令,   难道用cd不就可以切换目录了吗?   没错,使用cd就可以切换到需要访问的目录,   但是有时会是一个路径很长,层次很多的目录 ...

  5. RIPng配置（第十三组）

    拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...

  6. 基于vue-cli3.0构建功能完善的移动端架子，主要功能包括

    webpack 打包扩展 css:sass支持.normalize.css._mixin.scss._variables.scss vw.rem布局 跨域设置 eslint设置 cdn引入 路由设计. ...

  7. HW2018校招软件类笔试题

    一. 1.题目 输入一个字符串,输出字符串中最长的数字串.如果有多个数字串长度相等且都是最长的,则按照字符串顺序输出最后一个最长的数字串. 2.解答 [code] import java.util.* ...

  8. iOS逆向开发（0）：修改二进制代码与重签名 | hopper | codesigh

    小白:小程,你知道有些iOS程序是没人性的吗?老是不按我的意愿来运行! 小程:我怎么知道你的意愿就是有人性的? 本文解决一个问题:修改别人的二进制程序并运行起来. 让别人的程序按你的意愿来运行,文明一 ...

  9. leetcode — n-queens

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  10. 痞子衡嵌入式：恩智浦LPC系列MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是恩智浦LPC系列微控制器相关知识. 恩智浦半导体最早于2003年便开始推出LPC系列MCU,但早期的产品LPC2000/3000系列属 ...