用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 ...
随机推荐
- ASP.NE 上传文件控件
protected void Button1_Click(object sender, EventArgs e) { //if (Request["id"]==null & ...
- windows 下安装mysql 成功版
mysql 下载地址 http://dev.mysql.com/downloads/ zip版下载 解压到本地 假设文件保存在C:\mysql-5.7.17-winx64 1.以管理员身份运行cmd. ...
- Can't find variable: SockJS vue项目
用的vue-cli(webpack-simple模板),在开发环境运行(npm run dev),一直都没有问题,突然在ios的safari中调试,出现报错:Can't find variable: ...
- webpack学习（六）—webpack+react+es6（第2篇）
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- kvm迁移
一.迁移简介 迁移: 系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行.在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实时 ...
- [ZJOI2016]小星星（容斥+dp）
洛谷链接:https://www.luogu.org/problemnew/show/P3349 题意相当于给一棵树重新赋予彼此不同的编号,要求树上相邻的两个节点在给定的另外一个无向图中也存在边相连. ...
- Linux下进程与线程的区别
https://www.cnblogs.com/fah936861121/articles/8043187.html https://my.oschina.net/cnyinlinux/blog/36 ...
- Centos 修改主机名称
Centos 配置主机名称: 1.首先查询一下当前的主机名称 [root@localhost~]# hostnamectl status Static hostname: ****** //永久主机名 ...
- 继续聊WPF——为ListView的行设置样式
<Window x:Class="Wpf_GridHeaderStyle_sample.Window1" xmlns="http://schemas.microso ...
- Bootstrap 表单控件状态(验证状态)
在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...