<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <style>

        .span{

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

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

            height:100%;

            vertical-align: middle;

            border-radius: 1px;

            display:none

        }

        .help{

            width:1rem;

            height: 1rem;

            border: .05rem #fff solid;

            border-radius: 50%;

            -webkit-animation: rotation 1s ease-in-out infinite;

            -moz-animation: rotation 1s ease-in-out infinite;

            animation: rotation 1s ease-in-out infinite;

            position: absolute;

            top:50%;

            left:50%;

            margin-top:-.5rem;

            margin-left:-.5rem;

        }

        .help:after{

            width: .15rem;

            height: .15rem;

            background-color: #fff;

            border-radius: 100%;

            position: absolute;

            content: "";

            left:.06rem;

            top:.1rem;

        }

        @-webkit-keyframes rotation{

            0%{-webkit-transform: rotate(0deg);}

            100%{-webkit-transform: rotate(360deg);}

        }

        @-moz-keyframes rotation{

            0%{-moz-transform: rotate(0deg);}

            100%{-moz-transform: rotate(360deg);}

        }

        @keyframes rotation{

            0%{transform: rotate(0deg);}

            100%{transform: rotate(360deg);}

        }

    </style>

</head>

<body>

<div><button id="test" >点击</button></div>

<div class="span">

    <div class="help"></div>

</div>

<script>

    $("#test").click(function () {

        $('.span').show();

    })

</script>

</body>

</html>

纯css实现蒙层loading效果的更多相关文章

  1. 纯CSS仿windows系统loading效果

    今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...

  2. 纯CSS弹出层，城市切换效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  5. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  6. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  7. web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

    场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...

  8. 使用CSS时间打点的Loading效果的教程

    基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...

  9. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

随机推荐

  1. 《纪念碑谷》(Monument Valley) 系列游戏的空间结构是如何设计的？

    这个游戏有着像埃舍尔的画一样有着空间结构的矛盾,如果是2D游戏,艾达可以行走的路线.建筑结构变化的过程是如何绘制的?如果是3D游戏,那么如何对这种违背物理定律的矛盾空间进行建模?以前有一个叫“无限回廊 ...

  2. vue-layer

    npm:  https://www.npmjs.com/package/vue-layer 原文:https://www.cnblogs.com/myIvan/p/9564502.html 1.安装 ...

  3. TZOJ 1221 Tempter of the Bone(回溯+剪枝)

    描述 The doggie found a bone in an ancient maze, which fascinated him a lot. However, when he picked i ...

  4. Python词云（词频统计，掩膜显示）

    Python2.7 anaconda.安装Wordcloud,网上有许多下载路径,说一下掩模,就是在这个膜的区域才会有东西,当然这个与实际的掩模还有一定区别,这个词频显示是把所有统计的词,显示在这个掩 ...

  5. ubuntu系列-很好用的截图工具shutter

    直接在ubuntu软件市场中搜索“shutter”下载即可

  6. ubuntu下安装nginx1.11.10

    (本页仅作为个人笔记参考) 为openssl,zlib,pcre配置编译 wget http://om88fxbu9.bkt.clouddn.com/package/nginx/nginx-1.11. ...

  7. solrj 测试连接 6.6.5solr集群

    我开始环境是 linux上是6.6.5  pom也是6.6.5 按照学习视频的demo,他用的是4点几的solr,我换成了6点几的,没有CloudSolrServer  只有CloudSolrClie ...

  8. YII2中使用RBAC对模块，控制器，方法的权限控制以及规则的使用

    在使用YII2中自带的RBAC时,需要先配置config/web.php: return [ // ... 'components' => [ 'authManager' => [ 'cl ...

  9. 使用 Spring 2.5 注释驱动的 IoC 功能

    概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...

  10. 探索未知种族之osg类生物---器官初始化一

    我们把ViewerBase::frame()比作osg这类生物的肺,首先我们先来大概的看一下‘肺’长什么样子,有哪几部分组成.在这之前得对一些固定的零件进行说明,例如_done代表osg的viewer ...