用opcity模拟zindex渐变的效果
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渐变的效果的更多相关文章
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
- 用JS制作博客页面背景随滚动渐变的效果
今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...
- 小tip:CSS3下的渐变文字效果实现——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...
- php模拟数据库常用操作效果
test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...
- 经典！HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- CAGradientLayer实现图片渐变透明效果
CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyrigh ...
- 用POP动画模拟真实秒钟摆动效果
用POP动画模拟真实秒钟摆动效果 静态图: 动画图: 此处用到了POP中的Spring系列动画,现提供源码如下: SecondClockView.h 与 SecondClockView.m // // ...
- Silverlight调用一般性处理程序模拟Silverlight调用WCF效果（2）
[置顶] Silverlight调用一般性处理程序模拟Silverlight调用WCF效果(2) 分类: 技术2012-03-31 12:51 548人阅读 评论(0) 收藏 举报 silverlig ...
随机推荐
- html formData 数据 提交和 .netMVC接收
<form id="uploadForm" enctype="multipart/form-data"> <input type=" ...
- mysql安装包下载地址
1.打开mysql官网 :https://dev.mysql.com/ 2.选择 downlad-->windows-->MySQL Installer -->滑动至页面底部,选择第 ...
- 移动pc常用Meta标签
移动常用 <meta charset="UTF-8"> <title>{$configInfos['store_title']}</title> ...
- APICloud 获取缓存以及清除缓存（常用第三方方法）
一.app中经常会有缓存的清除这个操作,具体如下 1.获取缓存大小 apiready = function() { api.getCacheSize(function(ret, err) { //si ...
- js通过插件发送邮件
这个插件为SmtpJS 官网地址为 https://www.smtpjs.com/ 方法很简单 <script src="https://smtpjs.com/v2/smtp.js& ...
- Wireshark 如何捕获网络流量数据包
转自:http://www.4hou.com/web/7465.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutia ...
- 面试官问你如何解决web高并发这样回答就好了
所谓高并发,就是同一时间有很多流量(通常指用户)访问程序的接口.页面及其他资源,解决高并发就是当流量峰值到来时保证程序的稳定性. 我们一般用QPS(每秒查询数,又叫每秒请求数)来衡量程序的综合性能,数 ...
- 合并目录中的txt文件
txt 文件 合并 并 按章节 分隔 # -*- coding: utf8 -*- import os result_name = 'result.txt' def resplit_txt_in_fo ...
- poj 3041 最小点覆盖=最大匹配
#include<stdio.h> #include<string.h> #define N 510 int map[N][N],n,mark[N],link[N]; in ...
- [bzoj2131]免费的馅饼_树状数组
免费的馅饼 bzoj-2131 题目大意: 注释:$1\le n \le 10^5$,$1\le w \le 10^8$. 想法:首先,想到dp 状态:dp[i][j]表示i分钟在位置j的最大收益 优 ...