六虎

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

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

作者：

小综哥

在

我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

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

个人主页：starry陆离

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

上期文章：16个有用的CSS款式之3D相片墙

订阅专栏：『16个有用的CSS款式』

1.简介

关于初学前端的小白来说css款式的规划很检测基本功和构思主意，而在项目开发中咱们不行能将大部分的时间用于CSS代码的编写，能复用的就复用。因而我特意总结了16个在项目开发中常用的CSS款式，因为自己也是初学者，所以以小白的视角来记载和学习这16款款式的规划与编写。今天我为大家带来的是视觉差翻滚

来看一下最终作用吧！！！

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;躲藏最外层不行见区域以使视差收效

什么意思呢，咱们查看不加这个特点是什么作用：能够看到不加这个特点，网页是能够通过翻滚条浏览到一切内容的。

16个有用的CSS款式之视觉差翻滚

而当咱们加了这个特点，超出这一个页面的内容就不会出现，也不能通过翻滚条去查看。首要刚刚咱们是能够通过翻滚条去看到的。

16个有用的CSS款式之视觉差翻滚

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://www.6hu.cc/wp-content/uploads/2022/12/1671522330-cc7d4a1022e5c2f.jpg);
 background-size: cover;
 /* 中心，按z轴向远处移动1px，大小会缩小一倍，使用scale放大到原图大小 */
 transform: translateZ(-1px) scale(2);
 z-index: -1;
}

16个有用的CSS款式之视觉差翻滚

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款式之视觉差翻滚

更多文章