<!DOCTYPE html>

<html>

<head>

    <title>上传中</title>

    <style type="text/css">

.dong-hua {

    position: fixed;

    left: 0;

    top: 0;

    z-index: 10;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    color: #ffffff;

    font-size: 50px;

}

.dong-hua-chuan {

    text-align: center;

    font-size: 26px;

    margin-top: 330px;

    color: #ffffff;

}

.loader-05 {

    width: 1em;

    height: 1em;

    border: .2em solid transparent;

    border-top-color: currentcolor;

    border-radius: 50%;

    -webkit-animation: 1s loader-05 linear infinite;

    animation: 1s loader-05 linear infinite;

    position: relative;

    display: block;

    margin: 0 auto;

    margin-top: 15px;

}

.loader-05:before {

  content: '';

  display: block;

  width: inherit;

  height: inherit;

  position: absolute;

  top: -.2em;

  left: -.2em;

  border: .2em solid currentcolor;

  border-radius: 50%;

  opacity: .5;

}

@-webkit-keyframes loader-05 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes loader-05 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

    </style>

</head>

<body>

            <div class="dong-hua">

                <p class="dong-hua-chuan">上传中</p >

                <div class="loader-05">

                </div>

            </div>

</body>

</html>

//默认给.dong-hua加上display:none;属性，源代码中没加，然后放入静态页中任意位置。点击上传按钮时将display改为block，

注意动画div给定的z-index值应该设为最大，保证其他页面事件不会触发，然后上传结束

status返回200时将display改为none即可。

css上传图片中等待不可点击效果的更多相关文章

  1. 实现TextView中link的点击效果

    朋友们,你们在TextView处理link的时候是不是一直被苦逼的android默认的方式困扰?每次点击link的时候,点击效果是整个textview来响应.非常烂吧?原因就不多赘述了. 那么以下这个 ...

  2. css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

    linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)).(匀速) ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0. ...

  3. android selector设置button点击效果（具体）以及常见问题

    button的点击效果学习起来其实比較easy,此点对开发人员来说也是使用的比較频繁的一个知识点,与它相关的还有编辑框的获取焦点时改变背景颜色.选择button选择时改变字体颜色等等.这些其实都是用到 ...

  4. robot framework程序运行过程中，遇到点击事件之后，未出现点击之后的效果（求解）

    1.click Element操作,在实际过程中偶然会出现,日志显示已点击成功,但是实际自动化页面,没有点击成功之后的操作 现象: 现象描述:程序执行到点击侧边栏的[人员信息]之后,日志显示已经点击成 ...

  5. 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...

  6. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  7. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  8. 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  9. CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

随机推荐

  1. 安装elasticsearch 5.x, 6.x 常见问题（坑）的解决

    本人在elasticsearch 5.x, 6.x 安装过程中遇到了一些问题: 警告提示 [2016-11-06T16:27:21,712][WARN ][o.e.b.JNANatives ] una ...

  2. 洛谷P4707 重返现世 [DP，min-max容斥]

    传送门 前置知识 做这题前,您需要认识这个式子: \[ kthmax(S)=\sum_{\varnothing\neq T\subseteq S}{|T|-1\choose k-1} (-1)^{|T ...

  3. 密码正确 mysql无法登陆 red7.3 上安装mysql5.6后登录报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passswd ：yes）

    集群需要mysql存储元数据,就在前几天还运行好好的,突然就进不去了......还是太菜,遇到的bug少. 引起这种故障的原因有很多......第一个坑比较多,大部分用户也就用第一个就可以解决问题,我 ...

  4. WebSocketTest 异步通讯，实时返回数据

    using System;using System.Net;using System.Net.Sockets;using System.Text;using System.Threading;usin ...

  5. Confluence 6 "net.sf.hibernate.PropertyValueException: not-null" 相关问题解决

    如果你遇到了下面的错误信息,例如: ERROR [Importing data task] [confluence.importexport.impl.ReverseDatabinder] endEl ...

  6. Confluence 6 从一个备份中获得文件附件

    页面中的文件附件可以从备份中获得而不需要将备份文件导入到 Confluence 中.这个在用户删掉了附件,但是你还是想恢复这个附件的时候就变得非常有用了. 自动备份和手动备份都允许你进行这个操作,但是 ...

  7. react native 打包Ignoring return value of function declared with warn_unused_result attribute

    从 github上下载 项目 用于学习查看别人的代码, 当执行完npm install  用xcode 打开 发现俩个错误提示Ignoring return value of function dec ...

  8. STL的基本操作指令

    list :Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比较慢. assign() 给list赋值 back() 返回最后一个元素 b ...

  9. jsp 修饰 Request 及Response

    Servlet API包含4个可修饰的类,用于改变Servlet Request以及Servlet Response.这种修饰允许修改 ServletRequest以及ServletResponse或 ...

  10. python网络爬虫笔记（四）

    一.python中的高阶函数算法 1.sorted()函数的排序   sorted()函数是一个高阶函数,还可以接受一个key函数来实现自定义的函数排序,key指定的函数作用于每个序列元素上,并根据k ...