CSS简单实现一个背景视觉差效果页面

前言

视觉差效果是一种比较炫酷的网站效果，是指多个元素块以不同的速度移动，形成立体的运动效果，给人视觉上形成一种视觉差的效果

首先看看具体的效果展示:

由案例可以看出是动与静的体现，设置背景不随页面滚动，文本内容随页面滚动，从而达到给观看的人形成一种视觉上差异效果

具体实现

1. html页面布局：设置三个背景图元素块、两个文字元素块

<div class="content content1"></div>
    <div class="txt-content">
        <p>
            我想成为一个温柔的人，因为曾被温柔的人那样对待，深深了解那种被温柔相待的感觉。
        </p>
    </div>
    <div class="content content2"></div>
    <div class="txt-content">
        <p>
            所看到的东西未必存在，没有人理解我独自行走在那个不安定世界的恐惧，所看到的东西或许也不存在，那个不安定的世界。
        </p>
    </div>
    <div class="content content3"></div>

1. 背景视觉差效果主要由background-attachment属性实现，给三个背景图元素块设置不同的背景图片，并设置background-attachment属性为fixed ,让背景相对于视口固定，随着鼠标滚动，背景也不会随着页面而滚动

background-attachment 作用是决定背景图像是否在视口内固定，或者随着页面滚动。

属性值分别如下：

• scroll：默认值，背景图像会随着页面滚动而滚动
• fixed：背景图像不会随着页面的滚动而滚动
• local: 背景图像会随着元素内容的滚动而滚动
• inherit：继承父元素background-attachment属性的值

.content {
    height: 100vh;
}
.content1 {
    background: url(./img/388421.jpg) no-repeat center center/cover;
    background-attachment: fixed;
}
.content2 {
    background: url(./img/417323.jpg) no-repeat center center/cover;
    background-attachment: fixed;
}
.content3 {
    background: url(./img/696393.jpg) no-repeat center center/cover;
    background-attachment: fixed;
}

1. 两个文字元素块给文字做了一个移入的效果，当页面向下滚动，屏幕窗口出现文字模块，文字就从元素块下面向中间移入

.txt-content p {
    transform: translateY(0);
    opacity: 0;
}

.txt-content.scroll p {
    opacity: 1;
    animation: moveIn 1s linear;
}
@keyframes moveIn {
    0%{

        transform: translateY(250px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

1. 给页面添加一个头部，并且给页面文字标题加上了文字效果（ps: 夏目友人帐是我特别喜欢的一部动漫，特别治愈人心）

header {
    width: 100%;
    height: 70px;
    position: fixed;
    font-family: "宋体", Arial, Helvetica, sans-serif;
    background: rgba(204, 204, 204, .5);
}

header .wrap {
    width: 80%;
    margin: 0 auto;
}

header .wrap h1 {
    float: left;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 70px;
    background-image: url(./img/timg.gif);
    background-position:  center center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}