纯CSS3响应式页面顶部滚动视觉差特效

这是一款使用纯CSS3制作的炫酷响应式页面顶部滚动视觉差特效。该特效在页面向下滚动时，页面顶部的图片和正文的内容形成视觉差效果，非常炫酷。

使用方法

HTML结构

该视觉差效果使用一个<header>元素作为页面的头部。

<header>
  <h1>Parallax header</h1>
  <p>Parallax scroll effect like Twitter. Pure css, javacsript free.</p>
</header>        
                

CSS样式

整个页面被制作为透视度为1像素的3D空间。由于IE浏览器不支持transform-style: preserve-3d;属性，所以在IE中看不到视觉差效果。

body {
  color: #fff;
  margin:0;
  padding:0;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}  
                

header元素制作视觉差的代码如下：

header {
  box-sizing: border-box;
  min-height: 40vw;
  padding: 30vw 0 5vw;
  position: relative;
  -webkit-transform-style: inherit;
  transform-style: inherit;
  width: 100vw;
}
header, header:before {
  background: 50% 50% / cover;
}
header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-color: #8a8;
  background-image: url(../img/demo.jpg);
  background-size: cover;
  -webkit-transform-origin: center center 0;
  -webkit-transform: translateZ(-1px) scale(2);
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}