app遮罩层--网赚
css
.mask{
display: none;
position: fixed;
width: 100%;
height: 100%;
top:0;
background: rgba(0, 0, 0 ,0.5);
z-index: 99;
}
.mask-red{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
width: 18.5rem;
height: 20rem;
border-radius: 14px;
background-image: -webkit-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -moz-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -o-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
}
.mask-white{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
border-radius: 14px;
width: 16.5rem;
height: 18rem;
background: #fff;
}
.mask-img{
width: 11.1rem;
height: 11.05rem;
position: absolute;
left: 0;
right: 0;
top: -6.5rem;
margin: auto;
}
.mask-announcement{
margin-top: 3.5rem;
padding: 1rem;
}
.mask-tit{
font-size: 1.4rem;
color: #ec5d5d;
}
.mask-sub{
font-size: 1rem;
color: #666;
}
.mask-sub-small{
font-size: 0.85rem;
color: #999;
}
.mask .submit-btn{
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
width:13rem;
line-height: 2.8rem;
margin: 0 auto;
box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(236, 93, 93, 0.3);
}
/*关闭*/
.mask-close{
position: absolute;
left: 0;
right: 0;
bottom: -5rem;
text-align: center;
color: #fff;
}
.mask-close i{
font-size: 2.5rem;
}
html
<div class="mask">
<div class="mask-red">
<div class="mask-white">
<img src="../../images/qiandao_lihe.gif" class="mask-img" />
<div class="mask-announcement">
<h3 class="mask-tit mui-text-center lsy-padded-t-10 lsy-padded-b-10">恭喜您签到成功</h3>
<p class="mask-sub mui-text-center lsy-padded-b-10">积分已发放到我的积分里</p>
<p class="mask-sub-small mui-text-center lsy-padded-b-10">签到可获得10积分,积分可用来升级会员等级</p>
<div class="submit-btn lsy-margin-t-15 white-color">去我的积分看看</div>
</div>
<div class="mask-close"><i class="mui-icon iconfont icon-guanbi"></i></div>
</div>
</div>
</div>
js
<script src="../../js/jquery.min.js"></script>
<script type="text/javascript">
mui.init();
$(".mask").hide()
$("#check").click(function() {
$(".mask").show()
});
$(".mask").on('touchmove',function(e){
e.preventDefault(); //阻止默认遮罩后滚动行为
})
$("#close").click(function() {
$(".mask").hide()
});
</script>
app遮罩层--网赚的更多相关文章
- 网赚app
网赚app有很多目前来说做的比较好的赚的比较多的有四款推荐 宝石星球下载地址:http://www.baoshixingqiu.com/redPacket?key=548341 雪梨网APP下载地址 ...
- 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择
在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...
- Android自定义遮罩层设计
在做网页设计时,前端设计人员会经常用到基于JS开发的遮罩层,并且背景半透明.这样的效果怎么样在Android上实现呢?这个实现并不困难,先来上效果图: <ignore_js_op> 201 ...
- layer遮罩层 简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
- Axure Base 09 带遮罩层的弹出框
示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1. 点击按钮弹出带遮罩层的对话框: 2. 页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...
- 如何在Vue中,当鼠标hover上元素时,给元素加遮罩层
介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...
- element-ui遮罩层el-dialog的使用
template <el-button type="text" @click="dialogVisible = true">点击打开 Dialog& ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- 使用CSS3的box-shadow实现双透明遮罩层对话框
box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...
随机推荐
- Mysql 初始化 及 密码管理
安装好mysql后,第一次初始化数据库 前言:启动mysql数据库最好不要使用root用户,而是使用mysql用户启动 官方解释: (永远不要使用root帐号启动MySQL Server.这样做很危险 ...
- Debug使用
目录 Debug使用 Debug使用
- mqttnet3.0用法
.net常用的mqtt类库有2个,m2mqtt和mqttnet两个类库 当然了,这两个库的教程网上一搜一大把 但mqttnet搜到的教程全是2.7及以下版本的,但3.0版语法却不再兼容,升级版本会导致 ...
- Python常用库 - os库
os简单介绍 os 模块提供了非常丰富的方法用来处理文件和目录 os关于目录路径的方法 # 获取当前路径 path = os.getcwd() # 获取当前绝对路径 os.path.abspath(p ...
- Binder基本使用
Android开发中,Binder是一种跨进程通信方式,而使用AIDL可以实现Binder的工作. 如何使用它是了解它的第一步,本文章主要记录使用Binder的一些步骤.(代码思路参考<Andr ...
- ACP知识总结
由于ACP是一个敏捷开发的系统性知识,下面只针对我自身学习的知识总结,若需要完整的考试学习资料,可评论区或私聊我拿. 敏捷估计与规划.png ACP知识点锦集.png 敏捷项目软件总结.p ...
- opencv —— findContours、drawContours 寻找并绘制轮廓
轮廓图像与 Canny 图像的区别 一个轮廓一般对应一系列的点,也就是图像中的一条曲线.轮廓图像和 Canny 图像乍看起来表现几乎是一致的,但其实组成两者的数据结构差别很大: Canny 边缘图像是 ...
- 反射机制(reflection)
一.反射: 1.反射指可以在运行时加载.探知.使用编译期间完全未知的类. 2.程序在运行状态中,可以动态加载一个只有名称的类,对于任意一个已加载的类,都能够知道这个类的所有属性和方法: 对于任意一个对 ...
- Spring Bean自动装配有哪些方式?
Spring 容器能够自动装配 Bean .也就是说,可以通过检查 BeanFactory 的内容让 Spring 自动解析 Bean 的协作者. 自动装配的不同模式: no - 这是默认设置,表示没 ...
- java代码生成器 快速开发平台 二次开发 外包项目利器 springmvc SSM后台框架源码
. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限.2 ...