github地址:

    https://github.com/echoorx/opacity-Gradient

zindex好像不能渐变改变，所以用opcity来模拟

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div{

			width: 100px;

			height: 100px;

			position: absolute;

			top: 0;

		}

		.big{

			background-color: red;

		}

		.small{

			background-color: green;

			z-index: 1;

			opacity: 0;

		}

		#btn{

			margin-top: 200px;

		}

	</style>

</head>

	<div class="big"></div>

	<div class="small"></div>

	<input id="btn" value="1111" type="button">

<body>

	<script>

		var btn = document.querySelector('#btn');

		var small = document.querySelector('.small')

		btn.addEventListener('click',function(){

			var timer = setInterval(function(){

				var opc = window.getComputedStyle(small, null)["opacity"];

				opc = opc * 100 + 2;

				opc /= 100;

				small.style.opacity = opc;

				if(opc == 1){

					clearInterval(timer)

				}

			},10)

		})

	</script>

</body>

</html>

用opcity模拟zindex渐变的效果的更多相关文章

  1. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  2. 用JS制作博客页面背景随滚动渐变的效果

    今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...

  3. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  4. php模拟数据库常用操作效果

    test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...

  5. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  6. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  7. CAGradientLayer实现图片渐变透明效果

    CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyrigh ...

  8. 用POP动画模拟真实秒钟摆动效果

    用POP动画模拟真实秒钟摆动效果 静态图: 动画图: 此处用到了POP中的Spring系列动画,现提供源码如下: SecondClockView.h 与 SecondClockView.m // // ...

  9. Silverlight调用一般性处理程序模拟Silverlight调用WCF效果（2）

    [置顶] Silverlight调用一般性处理程序模拟Silverlight调用WCF效果(2) 分类: 技术2012-03-31 12:51 548人阅读 评论(0) 收藏 举报 silverlig ...

随机推荐

  1. redis与其可视化工具在win7上的安装

    步骤 1.下载安装Redis服务. 2.调用执行文件创建服务器以及测试缓存. 3.使用可视化工具redis-desktop-manager管理查询缓存. 1.下载安装Redis服务. 下载地址:htt ...

  2. APICloud 获取缓存以及清除缓存（常用第三方方法）

    一.app中经常会有缓存的清除这个操作,具体如下 1.获取缓存大小 apiready = function() { api.getCacheSize(function(ret, err) { //si ...

  3. 关于MySQL,Oracle和SQLServer的特点以及之间区别

    关系型数据库:是指采用了关系模型来组织数据的数据库.简单来说,关系模型指的就是二维表格模型,而一个关系型数据库就是由二维表及其之间的联系组成的一个数据组织. 非关系型数据库:非关系型数据库严格上说不是 ...

  4. top问题

    1. 从10万个数中找10个最大的数 对于这种题目,最普通的想法是先对这10万个数进行排序,然后再选取数组中前10个数,即为最后的答案,排序算法的时间复杂度不下于O(N lgN).最好的方法是建立一个 ...

  5. 51nod1256 乘法逆元【扩展欧几里得】

    给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K * M % N = 1,如果有多个满足条件的,输出最小的. Input 输入2个数M, N中间用 ...

  6. [Ynoi2016]谁的梦

    题目大意: 给定$n$个序列,要你从每个序列中选一个非空子串然后拼起来,拼成的序列的贡献为不同元素个数. 支持单点修改,在开始时和每次修改完后,输出所有不同选取方案的贡献和. 解题思路: 窝又来切Yn ...

  7. Git 基础教程 之 添加、提交

    一, 编写一个名为readme.txt文件,放入pythonwork目录下 ①   手动新建 ②   使用命令: a. touch readme.txt   b. vim readme.txt PS: ...

  8. java 反射之获取泛型对象的所有字段与对应的值（包括父类的）

    上代码: public static void main(String[] args) throws IntrospectionException { SysUser obj = new SysUse ...

  9. web跨域通信问题解决

    Web页面的跨域问题产生原因是企图使用JS脚本读写不同域的JS作用域.问题根源来自JavaScript的同源策略:出于安全考虑,Javascript限制来自不同源的web页面JS脚本之间进行交互.否则 ...

  10. wordpress常见问题

    一.WordPress新手必须注意的两个设置 第一 :设置里面的媒体--关闭wordpress缩略图功能如果开启了三种缩略图,博客上传的图片就会生成不同大小的三份,而基本上博客又没有使用,这样下来严重 ...