遮罩

最新推荐文章于 2022-09-28 10:43:57 发布
最新推荐文章于 2022-09-28 10:43:57 发布
阅读量270 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36381640/article/details/105752137
版权 
<div class="shadow" v-if="loading">
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
@charset "utf-8";
@font-face{font-family:'Lets-go-Digital';src:url('../fonts/Lets-go-Digital.TTF')}
@font-face {
    font-family: SourceHanSansCN;
    src: url('../fonts/SourceHanSans-CN-Regular.eot');
    src: url('../fonts/SourceHanSans-CN-Regular.eot?#iefix') format('embedded-opentype'),
    url("../fonts/SourceHanSans-CN-Regular.ttf") format("truetype"),
    url("../fonts/SourceHanSans-CN-Regular.woff") format("woff"),
    url("../fonts/SourceHanSans-CN-Regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img{border:medium none;margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 SourceHanSansCN, '微软雅黑',tahoma,Srial,helvetica,sans-serif;color:#fff}
h1,h2,h3,h4,h5,h6{font-size:100%;color:#fff;font-weight:normal;text-align:center;font-family:'SourceHanSansCN',Arial,Helvetica,sans-serif}
em{font-style:normal}
ul,ol{list-style:none}
a{text-decoration:none;color:#333}
a:hover{text-decoration:none}
img{border:0}
table{border-collapse:collapse;border-spacing:0;font-style:normal}
-webkit-scrollbar{display:none}

.clear{clear:both}
.cont{width:1920px;height:1080px;position:absolute;top:0;left:0;background:url('../images/background.png') no-repeat;background-size:100% 100%;overflow: hidden;}
/*.time{z-index:9999;opacity:.55;font-size:19px;color:#06f7e4;width:75px;position:absolute;left:1842px;top:28px;font-family:'Lets-go-Digital'}*/
/*.date{z-index:9999;opacity:.55;font-size:19px;color:#06f7e4;width:95px;position:absolute;left:1823px;top:11px;font-family:'Lets-go-Digital'}*/
.time{z-index: 9999;opacity: .55;font-size: 19px;color: #06f7e4;width: 80px;height: 24px;padding: 0;position: relative;left: 95%;text-align: center;top: 3%;font-family: 'Lets-go-Digital';margin: 0;}
.date{z-index: 9999;opacity: .55;font-size: 19px;color: #06f7e4;width: 98px;text-align: center;position: relative;left:94.5%;top: -1%;font-family: 'Lets-go-Digital';}
.title{width:1920px;height:70px;position:absolute;top:15px;left:0;background:url('../images/title-bg.png') no-repeat top center}
.title h1{display:inline-block;font-size:36px;width:480px;text-align:center;position:absolute;left:720px;top:5px;background-image:-webkit-linear-gradient(left,#58a3e9 0,#01fce4 50%,#58a3e9 100%);-webkit-background-clip:text;color:transparent;background-size:200% 100%;animation:flowlight 4s linear infinite;font-weight:bold;letter-spacing:5px;}
.title img{display:inline-block;float:left;margin-left:5px}
.title span{display:inline-block;float:right;text-align:center;font-size:16px;color:#00fcff;margin-right:10px}
@keyframes flowlight{0%{background-position:0 0}
    100%{background-position:-200% 0}
}
.home{width: 80px;height: 40px;background: url('../images/home-button.png') no-repeat;background-size:100% 100%;position: absolute;right:0;top:60px;margin-right:-30px;opacity: 0.4;}
.home:hover{animation:home 0.3s ease-in-out forwards ;}
@keyframes home {
    from { margin-right:-30px;opacity:0.2;}
    to { margin-right:0px;opacity:1;}
}


/* Sidebar Start */
.sidebar-top{width: 110px;height: 45px;position: absolute;right:0;top:98px;background:url('../images/sidebar-top-bg-nor.png') no-repeat;background-size: 100% 100%;opacity:0.4;cursor: pointer;}
.sidebar-top p{font-size:14px;line-height:40px;text-indent:14px;z-index:200;}
.sidebar-top:hover,.sidebar-top.active{opacity:1;background:url('../images/sidebar-top-bg-pre.png') no-repeat;background-size: 100% 100%;}
.sidebar-top:hover p,.sidebar-top.active p{font-weight: bold;font-size:16px;}

.sidebar{width:110px;height:350px;position: absolute;right:0;top:145px;z-index:100;opacity:0.5;}
.sidebar:hover,.sidebar.active{opacity:1;}
.sidebar::after{content:"";width:110px;height:28px;background:url('../images/sidebar-bg-title.png') no-repeat;background-size: 100% 100%;position: absolute;top:-28px;}
.sidebar::before{content:"";width:110px;height:350px;background:url('../images/sidebar-bg-cont-1.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:1;}

.sidebar-2{height:260px;top:760px;}
.sidebar-3{height:170px;top:550px;}
.sidebar-2::before{content:"";width:110px;height:260px;background:url('../images/sidebar-bg-cont-2.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:0.6;}
.sidebar-3::before{content:"";width:110px;height:170px;background:url('../images/sidebar-bg-cont-3.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:0.6;}
.sidebar>div{width:100%;height:98%;overflow-y: scroll;overflow-x: hidden;margin-top:10px;}
.sidebar-2>div{height:96%;}
.sidebar-3>div{height:85%;}

.sidebar>p{position: absolute;font-size:20px;right:10px;top:-24px;}
.sidebar>div::-webkit-scrollbar{display: none;}
.sidebar a{display: block;width:99px;height:50px;background: url('../images/sidebar-button-nor.png') no-repeat;background-size:100% 100%;float: right;font-size:18px;color:rgba(86,215,243,0.8);line-height:45px;text-indent:10px;margin-right:-30px;opacity:0.6;}
.sidebar a.active{background: url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-size:24px;font-weight:bold;text-shadow:3px 3px 3px rgba(0,0,0,0.5);margin-right:0;opacity:1;}
.sidebar a:hover{animation:sidebar 0.3s ease-in-out forwards ;}
.sidebar a.active:hover{animation:none;}

@keyframes sidebar {
    from { margin-right:-30px;opacity:0.6;}
    to { margin-right:0;opacity:0.8;background:url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-weight: bold}
}
/* Sidebar End */

/* Chart */
.top-left{width: 486px;height:367px;position: absolute;top:186px;left:25px;}
.top-right{width: 1264px;height: 453px;position: absolute;top:100px;left:533px;}
.bottom{width: 1774px;height: 453px;position: absolute;top:580px;left:25px;}
.top-left h3,.top-right h3,.bottom h3{font-size:20px;color:#00fcff;text-shadow:2px 2px  #000;display:block;margin-left:40px;margin-top:-8px;text-align:left;letter-spacing:1px;z-index:100;position: absolute;}
.top-left embed,.top-right embed,.bottom embed{transform:scale(1.44);transform-origin:top left;position: absolute;}

.top-left .chart,.top-right .chart,.bottom .chart{width:100%;height:calc(100% - 20px);}
.top-left-tit{width:490px;height:90px;position: absolute;top:85px;left:25px;}
.top-left-tit::before{content:"";width: 100%;height:100%;background: url('../images/top-left-tit-bg.png') no-repeat;background-size:100% 100%;position: absolute;top:0;left:0;opacity: 0.5;}
.top-left-tit>div{width:28%;display: inline-block;height:90px;text-align: center;}
.top-left-tit>div:nth-of-type(1){float: left;margin-left:13.7%;}
.top-left-tit>div:nth-of-type(2){float: right;margin-right:13.7%;}
.top-left-tit>div p{line-height:24px;margin-top:10px;font-size:14px;}
.top-left-tit>div span{width: 118px;height: 40px;border-radius:5px;border:1px solid #00b0ff;display: block;font-size:22px;margin:0 auto;line-height:40px;animation:top-tit-num-1 0.8s ease-in-out infinite alternate;}
.top-left-tit>div span.error{border:1px solid #ab2449;animation:top-tit-num-2 0.8s ease-in-out infinite alternate;color:#d7315e;}

@keyframes top-tit-num-1 {
    from { box-shadow: inset 0px 0px 15px rgba(105,199,253,0.5);}
    to { box-shadow: inset 0px 0px 5px rgba(105,199,253,0.1); }
}
@keyframes top-tit-num-2 {
    from { box-shadow: inset 0px 0px 15px rgba(171,36,73,1);}
    to { box-shadow: inset 0px 0px 5px rgba(171,36,73,0.6); }
}

/* 加载动画 */
.shadow{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.3);
    position: absolute;
    top:0;
    left:0;
    z-index: 999;
}
.spinner {
    margin: 300px auto;
    width: 50px;
    height: 50px;
    position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.6);

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}

@media screen and (max-width:1367px){
    .time{z-index: 9999;opacity: .55;font-size: 14px;color: #06f7e4;width: 53px;height: 24px;padding: 0;position: relative;left: 1300px;text-align: center;top: 20px;font-family: 'Lets-go-Digital';margin: 0;}
    .date{z-index: 9999;opacity: .55;font-size: 14px;color: #06f7e4;width: 72px;text-align: center;position: relative;left: 1292px;top: -20px;font-family: 'Lets-go-Digital';}
    .cont{width:1366px;height:768px}
    .title{width:100%;height:49px;background-size:100% 100%;margin-top:-10px}
    .title h1{font-size:21px;width:336px;left:515px;margin-top:5px}
    .logo{transform:scale(0.7,0.7);transform-origin:0 0}
    .title span{font-size:13px;font-weight:bold}
    /* Sidebar Start */
    .home{width:56px;height: 28px;margin-right:-20px;top:45px;}
    @keyframes home {
        from { margin-right:-20px;opacity:0.2;}
        to { margin-right:0px;opacity:1;}
    }
    .sidebar-top{width: 77px;height:32px;top:76px;opacity:0.4;}
    .sidebar-top p{font-size:12px;line-height:28px;text-indent:9px;}
    .sidebar-top:hover p,.sidebar-top.active p{font-size:14px;}

    .sidebar{width:77px;height:287px;position: absolute;right:0;top:110px;z-index:100;opacity:0.5;}
    .sidebar:hover,.sidebar.active{opacity:1;}
    .sidebar::after{content:"";width:77px;height:24px;top:-23px;}
    .sidebar::before{content:"";width:77px;height:287px;}

    .sidebar-2{height:147px;top:440px;}
    .sidebar-3{height:84px;top:636px;}
    .sidebar-2::before{content:"";width:77px;height:147px;}
    .sidebar-3::before{content:"";width:77px;height:84px;}


    .sidebar>p{font-size:14px;right:10px;top:-18px;}
    .sidebar a{display: block;width:70px;height:35px;font-size:14px;line-height:30px;text-indent:8px;margin-right:-18px;opacity:0.6;}
    .sidebar a.active{background: url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-size:16px;font-weight:bold;text-shadow:3px 3px 3px rgba(0,0,0,0.5);margin-right:-5px;opacity:1;}
    .sidebar a:hover{animation:sidebar 0.3s ease-in-out forwards ;}
    .sidebar a.active:hover{animation:none;}

    @keyframes sidebar {
        from { margin-right:-18px;opacity:0.6;}
        to { margin-right:-5px;opacity:0.8;background:url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;}
    }
    /* Sidebar End */
    /* Chart */
    .top-left{width:344px;height:260px;top:141px;left:30px;}
    .top-right{width: 895px;height:321px;top:80px;left:390px;}
    .bottom{width: 1256px;height: 321px;top:420px;left:30px;}

    .top-left h3,.top-right h3,.bottom h3{font-size:14px;text-shadow:none;margin-left:30px;margin-top:-4px;}
    .top-left embed,.top-right embed,.bottom embed{transform:scale(1.02);transform-origin:top left;position: absolute;}
    .top-left .chart,.top-right .chart,.bottom .chart{height:calc(100% - 12px);}

    .top-left-tit{width:350px;height:70px;top:55px;left:25px;}

    .top-left-tit>div{width:29%;display: inline-block;height:90px;text-align: center;}
    .top-left-tit>div:nth-of-type(1){margin-left:12.8%;}
    .top-left-tit>div:nth-of-type(2){margin-right:12.8%;}
    .top-left-tit>div p{line-height:16px;margin-top:10px;font-size:12px;margin-bottom:3px;}
    .top-left-tit>div span{width: 84px;height:28px;border-radius:5px;font-size:15px;margin:0 auto;line-height:28px;}
    .top-left-tit>div span.error{border:1px solid #ab2449;animation:top-tit-num-2 0.8s ease-in-out infinite alternate;color:#d7315e;}

}

 

多哥仁慈的骆驼
关注
专栏目录
Bootstrap系列之旋转器（Spinners）
老__L的博客
06-19 1746
旋转器（Spinners）
小程序 动态加载效果 ，小程序加载弹框
Gow_an的博客
05-16 3427
给大家提供一个小程序动态加载画面的代码示例，效果如下，仅供参考效果0效果1效果2，3自己拷代码看吧在wxml中的&lt;swiper&gt;标签中 把不看的效果注释 把想看的效果去掉注释就OK了wxml&lt;!--动态加载效果 --&gt; &lt;button bindtap='a'&gt;显示&lt;/button&gt; &lt;button bindtap='b'&gt;隐藏&lt;/...
14、jQuery插件之jquery.spinner数字智能增减插件
热门推荐
森森
05-27 1万+
参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单，请看演示示例1。 type="text" class="spinner"/> 调用也非常简单，先载入jqu
使用 CSS3 实现超炫的 Loading（加载）动画效果
不正经的博客
08-27 985
Loading 动画效果一： HTML 代码： &lt;div class="spinner"&gt;   &lt;div class="rect1"&gt;&lt;/div&gt;   &lt;div class="rect2"&gt;&lt;/div&gt;   &lt;div class="rect3"&gt;&amp
css加载中动画效果
学习路上的小刘
08-23 928
效果一: html代码： <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div>
Qt之实现遮罩窗口，实现了窗口遮罩效果
07-24
在Qt编程中，实现遮罩窗口（mask window）是一种常见的需求，主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层，它允许底层窗口的部分可见，但限制用户的交互。本文将详细介绍...
openlayers遮罩示例
01-29
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域...
Unity 光圈遮罩聚焦ui引导
07-08
在Unity引擎中，"光圈遮罩聚焦UI引导"是一种常用的技术，用于引导用户的注意力到游戏或应用中的特定UI元素。这种技术通过模拟相机光圈的效果，使界面的一部分变得模糊，而焦点区域则保持清晰，从而突出显示重要的UI...
点击遮罩层的背景关闭遮罩层
01-08
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
微信小程序-自定义组件-遮罩层
最新发布
05-05
遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此，我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 ...
pdf.js 加载文件过程添加loading等待动画
ZMJ_QQ的博客
09-28 1662
在加载一些大文件时，页面会先出现几秒的空白，给其加一个loading效果 2、在viewer.css中添加 3、在view.js中添加修改前 修改后 4、动画效果文件加载中 文件加载完成后
css3实现loading效果
weixin_30871701的博客
02-15 850
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> @media only screen and (min-width:320px...
loading
阿星小栈
02-08 102
&#13;     myLoading('加载中'); myLoading('加载完成', false); /*使用myLoading需要载入loading.css*/ window.myLoading = function (msg, isShow) { isShow = isShow !== false; if (isShow) { i...
微信小程序开发03-这是一个组件
weixin_34238642的博客
07-30 128
编写组件 基本结构 接上文：微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层： 之前这个组件是一个容器类组件，弹出层可设置载入的html结构，然后再设置各种事件即可，这种组件有一个特点： ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供 我们如果要在小程序中实现这类组件，意味着我们需要往小程序中动态插...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
city86的博客
05-05 2422
目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易，现在通过js和css就都能实现。下面我们来通过一个小动画看看如何用css来实现让你的网站动起来。 效果就是图片上下浮动，如何实现？其实只需要先定义一个样式。 先定义一个样式文件main.css，然后定义样式为： .float-ud { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: t...
超图supermap实现BIM模型的属性查询
UPCgiser
06-05 8769
有了BIM+GIS，实现室内室外一体化，室内导航等不再是梦想了哈！ 最近为了学bim+gis，断断续续开始学超图产品，还是小白一枚，若分享中有错误，欢迎批评指正！ 关于BIM的属性查询，之前在网上没找到合适的解决方案，走了不少弯路，终于解决了！废话不多说，直接上干货！ 相信有不少小伙伴像我一样，学习时候参考的这个范例http://support.supermap.com.cn:8090/we...
animation的具体应用详解
liyuedan的专栏
01-07 2143
animation的具体应用详解 .b{ background: url(icon_up.png) no-repeat 50% top; background-size:20px 10px; height:100px; width:580px; -webkit-animation: moveIconUp ease 1.5s both infinite; animation: moveIconU
思源字体的安装和使用
weixin_42492013的博客
12-26 6413
1、下载思源字体 并且解压 2、在百度中搜索 font-face生成器 或者点击网址 https://www.fontke.com/tool/fontface/ 打开生成器 ， 3、点击上传字体文件 将解压的字体文件夹中后缀名名为 .ttf的文件上传上去，然后点击立即生产，等一会会生成一个文件包并自动下载下来 4、将生成好并下载下来的文件包解压，，然后在前端项目中建一个foot文件夹，将，如果已...
Flash遮罩动画原理与制作
"模拟遮罩动画原理-FLASH遮罩动画说课课件" 在本次课件中，我们探讨的是模拟遮罩动画的原理及其在FLASH中的应用。遮罩动画是Flash动画制作中的一个重要技巧，它允许我们在一个层（遮罩层）上创建一个形状，这个形状...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值