我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月19日星期一

🌌上期文章：16个实用的CSS样式之3D照片墙

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是视觉差滚动

来看一下最终效果吧！！！ css_07

2.布局设计

布局设计相对简单，宏观上就是一个header用来放置背景图片，然后紧接着一个main放置文章内容。不过多介绍布局设计，详看代码：

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="style.css" />
     <title>Document</title>
   </head>
   <body>
     <header>
       <h1>上林赋</h1>
     </header>
     <main>
       <article>
         <p>...此处省略文章内容</p>
         
       </article>
     </main>
   </body>
 </html>

3.样式美化

3.1隐藏不可见区域

首先我们要对整个html页面添加一个属性html overflow: hidden;隐藏最外层不可见区域以使视差生效

什么意思呢，我们查看不加这个属性是什么效果：可以看到不加这个属性，网页是可以通过滚动条浏览到所有内容的。

而当我们加了这个属性，超出这一个页面的内容就不会出现，也不能通过滚动条去查看。主要刚刚我们是可以通过滚动条去看到的。

3.2图片与标题

接下来我们需要给header设置背景图片，并且给标题标签设置一定的样式美化一下。

在设置header的高度的时候要注意要让其布满整个页面，不然无法达到预期的效果，因为只有一开始用户看不到后面的文字，只见标题背景，通过用户去滚动才能展示出正文。这样才能给用户带来视觉时差。

 body {
   /* 开启3d空间，数值越小3D效果越大 */
   perspective: 1px;
   /* 在3D空间进行transform */
   transform-style: preserve-3d;
   overflow-x: hidden;
   overflow-y: auto;
   /* 需要设置高度以使时差生效 */
   height: 100vh;
 }
 
 header {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   transform-style: inherit;
   /* 需要设置高度以使时差生效 */
   height: 100vh;
 }
 
 header h1 {
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 1em 4em;
   font-size: 3em;
 }
 
 header::before {
   position: absolute;
   content: "";
   display: block;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg);
   background-size: cover;
   /* 核心，按z轴向远处移动1px，大小会缩小一倍，使用scale放大到原图大小 */
   transform: translateZ(-1px) scale(2);
   z-index: -1;
 }

css_07_01

3.3正文美化

到这里其实视觉差的效果已经出来了，不过我们还没有设置正文的样式，一丑一美就显得很突兀，因此我们接下来就设置正文的样式。

这个部分的美化很简单，黑底白字嘛。然后用盒子模型让文字居中即可。

 main {
   display: flex;
   justify-content: center;
   position: relative;
   background-color: #222f3e;
 }
 
 article {
   width: 90vw;
   max-width: 960px;
   padding: 6em 0;
   color: white;
   font-size: 18px;
   text-align: justify;
   letter-spacing: 0.075em;
   text-indent: 2em;
   line-height: 1.8em;
 }

4.结语

到此为止一个简单的视觉差滚动就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

16个实用的CSS样式之视觉差滚动