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 之string结构及命令详解

    1.set  key  value  ex  秒数   px  毫秒数  nx / xx  设置一个值,注:ex 与 px 同时存在时,取写在后面的一个为有效期,nx表示key不存时设置成功,xx表示 ...

  2. c# md5加密封装

    /// <summary> /// md5加密字符串 /// </summary> /// <param name="str">需要加密的字符串 ...

  3. Express+Nodejs 下的登录拦截实现

    Express+Nodejs 下的登录拦截实现 利用商城举例,在商城中没有登录之前,可以看商品列表.详情.登录或者注册都可以,但是购买的时候是不行的,那么这个功能在Node后台中是怎么实现的呢,这个功 ...

  4. Apex语言（九）类的方法

    1.方法 方法是对象的行为.如下表: 看书,编程,打球就是方法. 2.创建方法 [格式] 访问修饰符 返回值类型 方法名(形式参数列表){ 方法体; } 访问修饰符:可以为类方法指定访问级别. 例如, ...

  5. 【转】在VMware中为Linux系统安装VM-Tools的详解教程

    在VMware中为Linux系统安装VM-Tools的详解教程 如果大家打算在VMware虚拟机中安装Linux的话,那么在完成Linux的安装后,如果没有安装Vm-Tools的话,一部分功能将得不到 ...

  6. Spark中Task，Partition，RDD、节点数、Executor数、core数目的关系和Application，Driver，Job，Task，Stage理解

    梳理一下Spark中关于并发度涉及的几个概念File,Block,Split,Task,Partition,RDD以及节点数.Executor数.core数目的关系. 输入可能以多个文件的形式存储在H ...

  7. 洛谷P1090 合并果子【贪心】

    在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可以看出,所 ...

  8. 多种方法爬取猫眼电影Top100排行榜,保存到csv文件,下载封面图

    参考链接: https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/83663400 https://www.makcyun.top/web_sc ...

  9. springcloud(一)：初识springcloud

    研究了一段时间Spring Boot了准备向Spring Cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...

  10. orcale 多表连接

    多表连接: