我试图让过渡工作,以便背景颜色根据页面/即位置淡入另一种颜色。由具有相同类的div触发。
在这里找到了一些js(http://codepen.io/Funsella/pen/yLfAG)它在桌面上完全按照我想要的方式工作,但它在 iPad 上崩溃(无论浏览器如何)。
有人知道如何用 CSS 进行这种转换吗?
我发现但它是由悬停触发的..
例如..http://jsfiddle.net/L9JXG/1/
.div1 {
height:200px;
width:600px;
position:relative;
background:red;
}
.div1:after {
position:absolute;
width:100%;
height:100%;
content:'';
background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
background-size:cover;
opacity:1;
transition: 3s;
}
.div1:hover:after {
opacity:0;
}
您必须设置合适的断点。这里有一个很棒的resource对于这个问题。
一个独立的script更改用户滚动的页面背景
Demo
这是脚本的下载链接http://download.techstream.org/Change-Page-Background-on-Scroll.zip(点击后就会开始下载)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)