用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 ...
随机推荐
- java 基础回顾1
整理----加自己理解------网上参考----- java封装理念 一 概念: 隐藏对象的属性和实现细节,仅供对外提供公共访问方式. 二 好处 1) 将变量隔离 2) 便于使用 3) 提高重 ...
- 通过yum仓库安装mysql
1,下载安装包wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm2,安装mysql源yum -y ins ...
- Restrictions.like("字段field","%表达式exp%");
Restrictions.like("字段field","%表达式exp%");用hql语句就是 from table where field like '%e ...
- 56.doc values
主要知识点 doc values 搜索的时候,要依靠倒排索引:在54小节中写到在聚合排序的时候如果仅仅依靠倒排索引的话是不能得出准确的结果的,需要依靠正排索引,所谓的正排索引,其实就是doc ...
- node源码详解（三）
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...
- node源码详解（四）
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...
- Git 基础教程 之 Bug分支和Stash
在Git中,每个Bug都可以通过一个新的临时分支修复,修复后,合并分支,然后删除. ① 当接到一个Bug任务时,但dev上进行的工作还没有提交时: ② git stash 把现场工作“储藏 ...
- 学习EXTJS6（4）基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- WebFont与页面font-icon图标研究
当你打开(绝大部分)网站,页面上将会有许多形形色色的小图标(icon),适当的icon的可以达到一图胜千言的目的,使网页的表现效果更佳. 关于页面icon的制作,比较传统的方法是,让设计师去设计一个个 ...
- mongodb-replication set 复制集
推荐一篇mongodb集群的博客 replication set 多台服务器维护相同的数据副本,提高服务的可用性 1.启动3个实例,且声明属于某复制集 mongod --port 27017 --db ...