CSS3实现加载数据动画2

最新推荐文章于 2023-04-12 18:20:46 发布
最新推荐文章于 2023-04-12 18:20:46 发布
阅读量266 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HY909475/article/details/88789540
版权

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>

 

posted @ 2018-01-28 18:01 小白知浅 阅读( ...) 评论( ...) 编辑 收藏
小白知浅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3实现加载中动画
candy_tity的博客
11-25 2673
在用户访问页面的过程中，可能需要请求数据，进行响应。 但是如果在等待数据的过程中不给用户任何提示，用户的感觉是迷茫的，所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。随着技术的发展，我们希望用简单的代码就能实现这个功能，同时解决由于GIF图片带来的锯齿的问题。最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。 最终实现在请求数据时的效果：<!DOCTYP
css3动画-加载中···
ens600的博客
01-13 218
像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。...
简单CSS数据加载动画
丘鸣山的博客
06-03 648
众所周知，我们在开发前台页面的时候总是会涉及到数据加载的过程，期间数据量比较大的时候可能会出现加载的空档期，通过用户体验上来看，这段时间用户并不知道是卡了还是在加载过程中，所有才有了加载动画，我做了个比较简单的加载CSS，接下来看一下代码： CSS .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid rgba(51,120
css3 设置动态数值,如何设置动态数据的css属性
weixin_42106765的博客
08-04 1228
我正在使用javascript在div标签中编写一些内容。数据通过ajax接收。 这里是脚本如何设置动态数据的css属性$.ajax({url :' the url',data : {productValue: selectedText,giveMyId : saveMyName},type: 'POST',dataType: 'json',success: function(data){var ...
用css控制根据动态数据来显示背景图片的高亮进度
最新发布
Gemini仔仔的专栏
04-12 220
【代码】用css控制根据动态数据来显示背景图片的高亮进度。
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4468
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
css上传视频代码,CSS3 上传文件到云端的动画
weixin_34297863的博客
08-04 342
CSS语言：CSSSCSS确定*,*:after,*:before {box-sizing: border-box;font-family: arial;}body {text-align: center;padding-top: 25px;background: #ddd;}.btn {width: 300px;height: 300px;background: #ddd;position: r...
纯CSS3实现图标加载动画特效特效代码
03-20
总的来说，纯CSS3实现图标加载动画特效是一种高效且灵活的方法，不仅可以利用现成的库如Loaders.css快速构建动画，还能根据项目需求进行自定义设计，创造出独特且吸引人的视觉效果。同时，掌握CSS3动画原理和实践...
纯css3太阳加载中动画特效
07-24
在本文中，我们将深入探讨“纯CSS3太阳加载中动画特效”这一主题，这是一种利用CSS3的关键帧（keyframes）属性来创建创新的太阳图标加载动画的技术。 首先，我们来理解“纯CSS3”意味着什么。纯CSS3是指完全依赖于...
11种CSS3图标加载矢量动画特效
06-11
本篇将详细介绍11种基于CSS3实现的图标加载矢量动画特效，它们源自于Loaders.css这个强大的动画库。 1. **旋转圆点** 这是一种基础的加载动画，由三个等间距的小圆点组成，通过改变颜色和位置来模拟加载过程。CSS3...
利用css3动画动态渲染多条数据.html
04-15
利用css3动画做了一个横向柱状图，最重要的是可以动态增加数据并渲染，样式优美，实现原理简单，而且可维护性超强，你可以用来变种各种柱状图。
纯CSS3实现网页数据动态加载中带进度条特效
09-10
纯CSS3实现网页数据动态加载中带进度条特效代码下载。
jquery css3动态数据对比代码.zip
07-04
jquery css3动态数据对比代码是一款类似进度条的仿QQPK对比插件下载。
css3实现的各种加载中动画
08-30
css3实现的各种loading动画，调整动画颜色大小
CSS3卫星信息传送图形动画特效
07-24
CSS3卫星信息传送图形动画特效是一款纯css3实现的创意卫星旋转信息传送图形动画，互联网全球信息发送图形动画特效。
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
CSS3动画可以添加动态效果，例如，当用户触发某个事件时，流程图中的节点可以高亮或者沿特定路径移动，增强用户的交互体验。 4. **ElementUI**: ElementUI是一套基于Vue.js的开源UI组件库，它提供了一系列易于使用...
CSS3立方体3D旋转加载动画.zip
05-14
这个“CSS3立方体3D旋转加载动画”压缩包文件提供了一个利用CSS3实现的3D立方体旋转加载效果的实例。这种效果常用于网站加载时显示，以增加用户体验，展示数据正在加载的动态过程。 首先，我们要理解CSS3的3D转换。...
css加载动画
weixin_41897680的博客
09-25 8267
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
css使用var()函数，绑定动态变量
JunVei的博客
10-17 1309
【代码】css使用var()函数，绑定动态变量。
HTML+CSS实现浪漫动态表白动画
这个HTML和CSS结合的实例可以作为表白场景的一部分，比如在网页上创建一个浪漫的心形动画，用户可以在其中添加个性化的信息或动画元素，表达情感。通过控制粒子的数量、颜色、移动路径等，可以创造出各种不同风格的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值