CSS3实现加载数据动画2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现加载数据动画</title>
    <style type="text/css">
        .box{
            width: 100%;
            padding: 3%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
        .box .loader{
            width: 30%;
            height: 200px;
            float: left;
            margin-right: 3%;
            border: 1px #cccccc solid;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loading-1{
            width: 60px;
            height: 60px;
            position: relative;
        }
        .loading-1 i{
            display: block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #333333;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .loading-1 i:nth-child(1){
            -webkit-animation: loading-1 1s linear 0s infinite;
            -moz-animation: loading-1 1s linear 0s infinite;
            -o-animation: loading-1 1s linear 0s infinite;
            animation: loading-1 1s linear 0s infinite;
        }
        .loading-1 i:nth-child(2){
            -webkit-animation: loading-1 1s linear 0.2s infinite;
            -moz-animation: loading-1 1s linear 0.2s infinite;
            -o-animation: loading-1 1s linear 0.2s infinite;
            animation: loading-1 1s linear 0.2s infinite;
        }
        .loading-1 i:nth-child(2){
            -webkit-animation: loading-1 1s linear 0.4s infinite;
            -moz-animation: loading-1 1s linear 0.4s infinite;
            -o-animation: loading-1 1s linear 0.4s infinite;
            animation: loading-1 1s linear 0.4s infinite;
        }
        @-webkit-keyframes loading-1 {
            0%{
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }
        @-moz-keyframes loading-1 {
            0%{
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }
        @-o-keyframes loading-1 {
            0%{
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }
        @keyframes loading-1 {
            0%{
                -webkit-transform: scale(0);
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        .loading-2{
            width: 40px;
            height: 40px;
            position: relative;
        }
        .loading-2 i{
            display: block;
            border: 2px solid;
            border-color: transparent #333333;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
        }
        .loading-2 i:first-child{
            width: 35px;
            height: 35px;
            top: 0;
            left: 0;
            -webkit-animation: loading-2 1s ease 0s infinite;
            -moz-animation: loading-2 1s ease 0s infinite;
            -o-animation: loading-2 1s ease 0s infinite;
            animation: loading-2 1s ease 0s infinite;
        }
        .loading-2 i:last-child{
            width: 15px;
            height: 15px;
            top: 10px;
            left: 10px;
            -webkit-animation: loading-2 1s ease -0.25s infinite reverse;
            -moz-animation: loading-2 1s ease -0.25s infinite reverse;
            -o-animation: loading-2 1s ease -0.25s infinite reverse;
            animation: loading-2 1s ease -0.25s infinite reverse;
        }
        @-webkit-keyframes loading-2 {
            0%{
                -webkit-transform: rotate(0deg) scale(1);
                -moz-transform: rotate(0deg) scale(1);
                -ms-transform: rotate(0deg) scale(1);
                -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
            }
            50%{
                -webkit-transform: rotate(180deg) scale(.6);
                -moz-transform: rotate(180deg) scale(.6);
                -ms-transform: rotate(180deg) scale(.6);
                -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
            }
            100%{
                -webkit-transform: rotate(360deg) scale(1);
                -moz-transform: rotate(360deg) scale(1);
                -ms-transform: rotate(360deg) scale(1);
                -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
            }
        }
        @-moz-keyframes loading-2 {
            0%{
                -webkit-transform: rotate(0deg) scale(1);
                -moz-transform: rotate(0deg) scale(1);
                -ms-transform: rotate(0deg) scale(1);
                -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
            }
            50%{
                -webkit-transform: rotate(180deg) scale(.6);
                -moz-transform: rotate(180deg) scale(.6);
                -ms-transform: rotate(180deg) scale(.6);
                -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
            }
            100%{
                -webkit-transform: rotate(360deg) scale(1);
                -moz-transform: rotate(360deg) scale(1);
                -ms-transform: rotate(360deg) scale(1);
                -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
            }
        }
        @-o-keyframes loading-2 {
            0%{
                -webkit-transform: rotate(0deg) scale(1);
                -moz-transform: rotate(0deg) scale(1);
                -ms-transform: rotate(0deg) scale(1);
                -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
            }
            50%{
                -webkit-transform: rotate(180deg) scale(.6);
                -moz-transform: rotate(180deg) scale(.6);
                -ms-transform: rotate(180deg) scale(.6);
                -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
            }
            100%{
                -webkit-transform: rotate(360deg) scale(1);
                -moz-transform: rotate(360deg) scale(1);
                -ms-transform: rotate(360deg) scale(1);
                -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
            }
        }
        @keyframes loading-2 {
            0%{
                -webkit-transform: rotate(0deg) scale(1);
                -moz-transform: rotate(0deg) scale(1);
                -ms-transform: rotate(0deg) scale(1);
                -o-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
            }
            50%{
                -webkit-transform: rotate(180deg) scale(.6);
                -moz-transform: rotate(180deg) scale(.6);
                -ms-transform: rotate(180deg) scale(.6);
                -o-transform: rotate(180deg) scale(.6);
                transform: rotate(180deg) scale(.6);
            }
            100%{
                -webkit-transform: rotate(360deg) scale(1);
                -moz-transform: rotate(360deg) scale(1);
                -ms-transform: rotate(360deg) scale(1);
                -o-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
            }
        }

        .loading-3{
            width: 80px;
            height: 20px;
            position: relative;
        }
        .loading-3 i{
            display: block;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #333333;
            margin-right: 10px;
            position: absolute;
        }
        .loading-3 i:nth-child(1){
            -webkit-animation: loading-3 2s linear 0s infinite;
            -moz-animation: loading-3 2s linear 0s infinite;
            -o-animation: loading-3 2s linear 0s infinite;
            animation: loading-3 2s linear 0s infinite;
        }
        .loading-3 i:nth-child(2){
            -webkit-animation: loading-3 2s linear -0.4s infinite;
            -moz-animation: loading-3 2s linear -0.4s infinite;
            -o-animation: loading-3 2s linear -0.4s infinite;
            animation: loading-3 2s linear -0.4s infinite;
        }
        .loading-3 i:nth-child(3){
            -webkit-animation: loading-3 2s linear -0.8s infinite;
            -moz-animation: loading-3 2s linear -0.8s infinite;
            -o-animation: loading-3 2s linear -0.8s infinite;
            animation: loading-3 2s linear -0.8s infinite;
        }
        .loading-3 i:nth-child(4){
            -webkit-animation: loading-3 2s linear -1.2s infinite;
            -moz-animation: loading-3 2s linear -1.2s infinite;
            -o-animation: loading-3 2s linear -1.2s infinite;
            animation: loading-3 2s linear -1.2s infinite;
        }
        .loading-3 i:nth-child(5){
            -webkit-animation: loading-3 2s linear -1.6s infinite;
            -moz-animation: loading-3 2s linear -1.6s infinite;
            -o-animation: loading-3 2s linear -1.6s infinite;
            animation: loading-3 2s linear -1.6s infinite;
        }
        @-moz-keyframes loading-3 {
            0%{
                left: 100px;
                top: 0;
            }
            80%{
                left: 0;
                top: 0;
            }
            85%{
                width: 20px;
                height: 20px;
                left: 0;
                top: -25px;
            }
            90%{
                width: 40px;
                height: 20px;
            }
            95%{
                left: 100px;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            100%{
                left: 100px;
                top: 0;
            }
        }
        @-webkit-keyframes loading-3 {
            0%{
                left: 100px;
                top: 0;
            }
            80%{
                left: 0;
                top: 0;
            }
            85%{
                width: 20px;
                height: 20px;
                left: 0;
                top: -25px;
            }
            90%{
                width: 40px;
                height: 20px;
            }
            95%{
                left: 100px;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            100%{
                left: 100px;
                top: 0;
            }
        }
        @-o-keyframes loading-3 {
            0%{
                left: 100px;
                top: 0;
            }
            80%{
                left: 0;
                top: 0;
            }
            85%{
                width: 20px;
                height: 20px;
                left: 0;
                top: -25px;
            }
            90%{
                width: 40px;
                height: 20px;
            }
            95%{
                left: 100px;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            100%{
                left: 100px;
                top: 0;
            }
        }
        @keyframes loading-3 {
            0%{
                left: 100px;
                top: 0;
            }
            80%{
                left: 0;
                top: 0;
            }
            85%{
                width: 20px;
                height: 20px;
                left: 0;
                top: -25px;
            }
            90%{
                width: 40px;
                height: 20px;
            }
            95%{
                left: 100px;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            100%{
                left: 100px;
                top: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader">
            <div class="loading-1">
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="loader">
            <div class="loading-2">
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="loader">
            <div class="loading-3">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
</body>
</html>

原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8371792.html

时间： 2024-11-05 18:32:07

CSS3实现加载数据动画2的相关文章

css3加载ing动画

项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function tipLoading(type,top,left){ if($("arrorbox"))$('#arrorbox').remove(); var dataType=[ '<div class="sk-circle"><div class="

10个样式各异的CSS3 Loading加载动画

前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图: 你也可以在这里查看DEMO演示. 下面我们来挑选几个比较典型的案例来分析一下代码. 先来看看第一个案例,是条状动画,HTML代码如下: <div id="caseVerte"> <div id="case1"></div> <

使用CSS3实现超炫的Loading（加载）动画效果（转）

使用CSS3实现超炫的Loading(加载)动画效果 SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一 HTML 代码: 1 2 3 4 5 6 7 <

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

Android仿美团加载数据小人奔跑进度动画对话框（附顺丰快递员奔跑效果）

我们都知道在Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation).帧动画是提供了一种逐帧播放图片的动画方式,播放事先做好的图像,与gif图片原理类似,就像是在放电影一样.补间动画可以实现View组件的移动.放大.缩小以及渐变等效果. 今天我们主要来模仿一下美团中加载数据时小人奔跑动画的对话框效果,取个有趣的名字就是Running Man,奔跑吧,兄弟!话不多少,先上效果图,让各位大侠看看是不是你想要实现的效果,然

iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ 下面是按照官网给的Demo,写的一个异步加载数据实例: 1 <title>iScroll demo: click</title> 2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></scrip

Android 自定义View修炼-自定义加载进度动画LoadingImageView

一.概述本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 直接看下面的效果图吧. 二.效果图废话不说,先来看看效果图吧~~ 三.实现原理方案 1.自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容. 2.根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来

iscroll5 上拉，下拉加载数据

我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余正常. 4.只要页面没有 <div id="pullDown"> <div class="pullDownLabel">正在加载中...</div> </div> 这段代码就不会执行下拉加载数据.//没有上拉时候用到的ht

echarts在.Net中使用实例(二) 使用ajax动态加载数据

前一篇文章链接:echarts在.Net中使用实例(一) 简单的Demo 通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明 {Array} color 数值系列的颜色列表,(详见color),可配数组,eg:['#87cefa', 'rgba