Css_加载样式

第一种效果：

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

       .loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 60px;
                margin-top: -20px;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.52s;
        }

第二种效果：

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: turn 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: changeBgColor 2s linear infinite;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes turn{
            0%{
                -webkit-transform: rotate(0deg);
                border-color: lightgreen;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color: lightblue;
            }
        }

第三种效果：

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
            text-align: center;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1.2);
            }
            100%{
                opacity: .2;
                -webkit-transform: scale(.2);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

第四种效果：

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 150px;
            height: 8px;
            border-radius: 4px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightblue;
            overflow: hidden;
        }
        .loading span{
            display:block;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            background: lightgreen;
            -webkit-animation: changePosition 4s linear infinite;
        }
        @-webkit-keyframes changePosition{
            0%{
                -webkit-transform: translate(-150px);
            }
            50%{
                -webkit-transform: translate(0);
            }
            100%{
                -webkit-transform: translate(150px);
            }
        }

第五种效果：

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 200px;
            height: 60px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        .loading span{
            width: 50px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            overflow: hidden;
            -webkit-animation: changePosition 2.08s linear infinite;
        }
        @-webkit-keyframes changePosition{
            0%,100%{
                -webkit-transform: translate(70px);
            }
            20%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(0px);
            }
            30%{
                width: 20px;
                height: 60px;
                margin-top:-30px;
                -webkit-transform: translate(0px);
            }
            35%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(5px);
                background: lightblue;
            }
            70%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(160px);
            }
            80%{
                width: 20px;
                height: 60px;
                margin-top:-30px;
                -webkit-transform: translate(160px);
            }
            85%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(155px);
                background: lightgreen;
            }

        }

第六种效果：

代码如下：

<div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 30px;
            height: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-5px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 10px;
            top: 20px;
            -webkit-transform: rotate(45deg);
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 10px;
            margin-left: -15px;
            -webkit-transform: rotate(90deg);
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 20px;
            right:10px;
            -webkit-transform: rotate(135deg);
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-5px;
            -webkit-transform: rotate(180deg);
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 10px;
            bottom:20px;
            -webkit-transform: rotate(225deg);
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
            -webkit-transform: rotate(270deg);
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 20px;
            left: 10px;
            -webkit-transform: rotate(315deg);
            -webkit-animation-delay:1.04s;
        }

第七种效果：

代码如下：

<div class="loadEffect">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>

.loadEffect {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
        }
        .loadEffect div{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-animation: load 2.08s linear infinite;
        }
        .loadEffect div span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: rotate(0deg);
            }
            10%{
                -webkit-transform: rotate(45deg);
            }
            50%{
                opacity: 1;
                -webkit-transform: rotate(160deg);
            }
            62%{
                opacity: 0;
            }
            65%{
                opacity: 0;
                -webkit-transform: rotate(200deg);
            }
            90%{
                -webkit-transform: rotate(340deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }

        }
        .loadEffect div:nth-child(1){
            -webkit-animation-delay:0.2s;
        }
        .loadEffect div:nth-child(2){
            -webkit-animation-delay:0.4s;
        }
        .loadEffect div:nth-child(3){
            -webkit-animation-delay:0.6s;
        }
        .loadEffect div:nth-child(4){
            -webkit-animation-delay:0.8s;
        }

第八种效果：

代码如下：

<div class="loading">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>

.loading{
            width: 60px;
            height: 60px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            -webkit-animation: load 3s linear infinite;
        }
        .loading div{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .loading span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #99CC66;
            position: absolute;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            -webkit-animation: changeBgColor 3s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: rotate(0deg);
            }
            33.3%{
                -webkit-transform: rotate(120deg);
            }
            66.6%{
                -webkit-transform: rotate(240deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes changeBgColor{
            0%,100%{
                background: #99CC66;
            }
            33.3%{
                background: #FFFF66;
            }
            66.6%{
                background: #FF6666;
            }
        }
        .loading div:nth-child(2){
            -webkit-transform: rotate(120deg);
        }
        .loading div:nth-child(3){
            -webkit-transform: rotate(240deg);
        }
        .loading div:nth-child(2) span{
            -webkit-animation-delay: 1s;
        }
        .loading div:nth-child(3) span{
            -webkit-animation-delay: 2s;
        }
时间： 2024-11-04 11:54:03

Css_加载样式的相关文章

客户端加载样式流程和规范

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Arial; color: #323333 } span.s1 { } 客户端的加载流程和样式应该收敛内置到底层框架中的,对常规页面来说,这些流程和规范是无须上层业务关心的. 好处: 1, 统一的UI UE体验: 2, 把业务开发人员从加载样式中解放出来,不必在业务逻辑代码中插入各种弹出.关闭加载样式的代码,业务自己做的话很容易漏掉,导致加载状态异常: 3,方便后续修改.扩展加载样式. 以下

APP的六种loading加载样式，全在这...

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

APP的六种loading加载样式

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

反向代理多个php站点无法加载样式css/js

在location php段后添加/pp 代理到192.168.1.200/pp后无法加载样式按匹配规则先匹配*.php后,再继续匹配其他(第一个location为主站) 后修改/pp前添加~^ 已匹配pp开头后就不在匹配了 原文地址:http://blog.51cto.com/czwanga/2089190

iview库修改table组件首次加载样式错乱

因为UI设计稿这边与我们使用的iview库中的表格组件样式不统一,所以需要对表格组件的样式进行修改. 修改完成后出现一个问题就是首次进入页面的时候,表格样式会有部分是错乱的,页面刷新一下就恢复正常了,页面也没有报错甚至没有警告. 排查很久发现我对其中一个内边距设置为0造成的,代码如此下: 将这个padding注掉就不会出现首次加载样式错乱了 原文地址:https://www.cnblogs.com/sixrookie/p/10953682.html

css3多列布局瀑布流加载样式

看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3多列属性瀑布流</title> <style> /*大层*/ .container{width:80%;margin: 0 auto;}

针对不同的屏幕加载样式表

<link href="extra-small.css" rel="stylesheet" media="screen and (max-width: 390px)" /> <link href="small.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)"

Javascript动态加载样式文件

Javascript脚本如下: function loadCss(cssUrl){//函数定义 var link=document.createElement("link"); link.rel="stylesheet"; link.type="text/css"; link.href=cssUrl; var head=document.getElementsByTagName("head")[0]; head.appendC

css加载样式

第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .loading{ width: 80px; height: 40px; margin: 0 auto; margin-t