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. Android 性能测试初探（一）

    Android 性能测试,跟 pc 性能测试一样分为客户端及服务器,但在客户端上的性能测试分为 2 类: 一类为 rom 版本的性能测试 一类为应用的性能测试 对于应用性能测试,包括很多测试项,如启动 ...

  2. 【剑指Offer】16、合并两个排序的链表

      题目描述:   输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则.   解题思路:   首先需要判断几个特殊情况,即判断输入的两个指针是否为空.如果第一个 ...

  3. 【剑指Offer】6、旋转数组的最小数字

      题目描述:   把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5 ...

  4. 编写 Shell 脚本的最佳实践

    转自:http://kb.cnblogs.com/page/574767/ 前言 由于工作需要,最近重新开始拾掇shell脚本.虽然绝大部分命令自己平时也经常使用,但是在写成脚本的时候总觉得写的很难看 ...

  5. while(Thread.activeCount() > 1)

    今天看到深入理解JVM第367页多线程volatile部分照着书本敲着代码发现了一个问题 Thread.activeCount()会一直大于2 public class VolatileTest { ...

  6. 关于约束ENABLE NOVALIDATE的一个疑问

    http://www.dbunix.com/?p=188 关于约束ENABLE NOVALIDATE的一个疑问 CREATE TABLE test (id varchar2(12), name var ...

  7. hdu 1713求分数的最小公倍数

    题意中的圈数和天数说反了 #include<stdio.h> __int64 gcd(__int64 a,__int64 b) {/* 比如4/3 3/5 通分20/15 9/15 所以这 ...

  8. vs code--snippet与快速提示

    因为快速语法提示和建议冲突,所以要么禁用语法提示,要么禁用建议 Note that quick suggestions and Tab completion might interfere becau ...

  9. [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

    getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...

  10. JavaScript特效之前进，后退（返回上一级）

    在页面上增加前进,后退(返回上一级)功能: 方式一:使用函数 <script> function goback(){  history.go(-1);//返回或者history.back( ...