当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(1) 评论(0)

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

简介

#####  HTML结构
该视觉差效果使用一个header元素作为页面的头部。

```html
<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中看不到视觉差效果。

```html
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元素制作视觉差的代码如下：

```html
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;
}   
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果