成都web前端培训
成都达内金融街中心

18328393564

热门课程

顶部滚动视觉差特效代码

  • 时间:2016-06-30 13:54
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——纯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;

}  

上一篇:元素水平居中css代码分享
下一篇:响应式六边形网格代码分享
选择城市和中心
贵州省

广西省

海南省