四种loading加载效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>四种加载效果</title>

<style>

/*第一种*/

.demo1 {

    width: 4px;

    height: 4px;

    border-radius: 2px;

    background: #68b2ce;

    float: left;

    margin:  3px;

    animation: demo1 linear 1s infinite;

    -webkit-animation: demo1 linear 1s infinite;

}

.demo1:nth-child(){

    animation-delay:0s;

}

.demo1:nth-child(){

    animation-delay:.15s;

}

.demo1:nth-child(){

    animation-delay:.3s;

}

.demo1:nth-child(){

    animation-delay:.45s;

}

.demo1:nth-child(){

    animation-delay:.6s;

}

@keyframes demo1{

    %,%,% {transform: scale();}

    % {transform: scale(2.5);}

}

@-webkit-keyframes demo1{

    %,%,% {transform: scale();}

    % {transform: scale(2.5);}

}

/*第二种*/

.demo2 {

    width: 4px;

    height: 6px;

    background: #68b2ce;

    float: left;

    margin:  3px;

    animation: demo2 linear 1s infinite;

    -webkit-animation: demo2 linear 1s infinite;

}

.demo2:nth-child(){

    animation-delay:0s;

}

.demo2:nth-child(){

    animation-delay:.15s;

}

.demo2:nth-child(){

    animation-delay:.3s;

}

.demo2:nth-child(){

    animation-delay:.45s;

}

.demo2:nth-child(){

    animation-delay:.6s;

}

@keyframes demo2{

    %,%,% {transform: scale();}

    % {transform: scaleY();}

}

@-webkit-keyframes demo2{

    %,%,% {transform: scale();}

    % {transform: scaleY();}

}

/*第三种*/

#loading3 {

    position: relative;

    width: 50px;

    height: 50px;

}

.demo3 {

    width: 4px;

    height: 4px;

    border-radius: 2px;

    background: #68b2ce;

    position: absolute;

    animation: demo3 linear .8s infinite;

    -webkit-animation: demo3 linear .8s infinite;

}

.demo3:nth-child(){

    left: 24px;

    top: 2px;

    animation-delay:0s;

}

.demo3:nth-child(){

    left: 40px;

    top: 8px;

    animation-delay:.1s;

}

.demo3:nth-child(){

    left: 47px;

    top: 24px;

    animation-delay:.1s;

}

.demo3:nth-child(){

    left: 40px;

    top: 40px;

    animation-delay:.2s;

}

.demo3:nth-child(){

    left: 24px;

    top: 47px;

    animation-delay:.4s;

}

.demo3:nth-child(){

    left: 8px;

    top: 40px;

    animation-delay:.5s;

}

.demo3:nth-child(){

    left: 2px;

    top: 24px;

    animation-delay:.6s;

}

.demo3:nth-child(){

    left: 8px;

    top: 8px;

    animation-delay:.7s;

}

@keyframes demo3{

    %,%,% {transform: scale();}

    % {transform: scale();}

}

@-webkit-keyframes demo3{

    %,%,% {transform: scale();}

    % {transform: scale();}

}

/*第四种*/

#loading5 {

    width: 20px;

    height: 100px;

    border-bottom: 1px solid #68b2ce;

}

.demo5 {

    width: 20px;

    height: 20px;

    border-radius: 10px;

    background: #68b2ce;

    animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;

    -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;

}

@keyframes demo5{

    %{

        transform:translateY(0px);

        -webkit-transform:translateY(0px);

    }

    %{

        transform:translateY(80px);

        -webkit-transform:translateY(80px);

    }

}

@-webkit-keyframes demo5{

    %{

        transform:translateY(0px);

        -webkit-transform:translateY(0px);

    }

    % {

        transform:translateY(80px);

        -webkit-transform:translateY(80px);

    }

}

</style>

<body>

    <div id="loading1">

        <div class="demo1"></div>

        <div class="demo1"></div>

        <div class="demo1"></div>

        <div class="demo1"></div>

        <div class="demo1"></div>

    </div>

    <div id="loading2">

        <div class="demo2"></div>

        <div class="demo2"></div>

        <div class="demo2"></div>

        <div class="demo2"></div>

        <div class="demo2"></div>

    </div>

    <div id="loading3">

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

        <div class="demo3"></div>

    </div>

    <div id="loading5">

        <div class="demo5"></div>

    </div>

</body>

</html>

CSS实现四种loading动画效果的更多相关文章

  1. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  2. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

  3. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  4. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  5. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  6. Atitit Loading 动画效果

    Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...

  7. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  8. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

随机推荐

  1. Codeforces Round #475 Div. 2 A B C D

    A - Splits 题意 将一个正整数拆分成若干个正整数的和,从大到小排下来,与第一个数字相同的数字的个数为这个拆分的权重. 问\(n\)的所有拆分的不同权重可能个数. 思路 全拆成1,然后每次将2 ...

  2. HDU1907（尼姆博弈）

    John Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  3. Linux2.6.32内核笔记（5）在应用程序中移植使用内核链表【转】

    转自:http://blog.csdn.net/Deep_l_zh/article/details/48392935 版权声明:本文为博主原创文章,未经博主允许不得转载. 摘要:将内核链表移植到应用程 ...

  4. solr requestHandler

    使用哪一个handler: 1. 可以通过在url中追加有名字的handler(以 ' / ' 开头命名)的名称来指定使用哪一个handler. 如: <requestHandler name= ...

  5. LNMP的基本配置

    LNMP的基本配置cd /usr/local/nginx_php/etc/ > php-fpm.conf                      //清空php-fpm.conf vim ph ...

  6. java线程池ThreadPoolExecutor的使用

    package s.b.foo.caze.thread; import java.io.Serializable; import java.util.concurrent.ArrayBlockingQ ...

  7. G - Rescue 【地图型BFS+优先队列（有障碍物）】

    Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is described as a N * M ...

  8. ( 转 ) 数据库BTree索引、Hash索引、Bitmap位图索引的优缺点

    测试于:MySQL 5.5.25 当前测试的版本是Mysql 5.5.25只有BTree和Hash两种索引类型,默认为BTree.Oracle或其他类型数据库中会有Bitmap索引(位图索引),这里作 ...

  9. [BZOJ5461][LOJ#2537[PKUWC2018]Minimax(概率DP+线段树合并)

    还是没有弄清楚线段树合并的时间复杂度是怎么保证的,就当是$O(m\log n)$吧. 这题有一个显然的DP,dp[i][j]表示节点i的值为j的概率,转移时维护前缀后缀和,将4项加起来就好了. 这个感 ...

  10. 【分治】计算概论（A） / 函数递归练习（1）多边形游戏

    #include<cstdio> #include<algorithm> using namespace std; ],c[],s[]; int work(int L,int ...