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. 与swift协议相关的技术

    一.协议定义与实现: 1.关联类型: 2.协议组合: 3.协议扩展: 4.协议实现. 二.协议使用:

  2. jq 跨域请求

    //使用getJSON <script type="text/javascript"> $(function () { $("#btn2").cli ...

  3. 团体程序设计天梯赛-练习集-L1-034. 点赞

    L1-034. 点赞 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持 ...

  4. javaee 用Buffered进行对象的写入和读取

    package Zjshuchu; import java.io.Serializable; public class Dog implements Serializable{    private ...

  5. anaconda安装的TensorFlow版本没有model这个模块

    一.采用git bash来安装,确认已经安装了git 二.手动找到TensorFlow的模块文件夹地址,若不知道,输入以下两行代码: import tensorflow as tf tf.__path ...

  6. 15.3 Task 语法和语义

    15.3.1 声明异步方法和返回类型 async static void GetStringAsync() { using (var client = new HttpClient()) { Task ...

  7. [MySQL优化案例]系列 — RAND()优化

    众所周知,在MySQL中,如果直接 ORDER BY RAND() 的话,效率非常差,因为会多次执行.事实上,如果等值查询也是用 RAND() 的话也如此,我们先来看看下面这几个SQL的不同执行计划和 ...

  8. SQL中IS NOT NULL与!=NULL的区别

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  9. ZOJ - 3483 - Gaussian Prime

    先上题目: Gaussian Prime Time Limit: 3 Seconds      Memory Limit: 65536 KB In number theory, a Gaussian ...

  10. 0807再整理SQL执行流程

    转自http://www.cnblogs.com/annsshadow/p/5037667.html MySQL架构总览->查询执行流程->SQL解析顺序   前言: 一直是想知道一条SQ ...