如何实现Web上文字的渐入效果

前言

每当苹果官网发布新产品的时候，都会给我们带来眼前一亮的设计。

今天我们来实现上面视频中的文字渐入效果。

首先将需要展示的文字输入标题内（此处省略基本格式）。

HTML:

<h1>Sow nothing, reap nothing.</h1>

进入CSS文件，将背景调成黑色，外边距设为0，高度设为300vh。

CSS:

body {
   
   background-color: #000;
   margin: 0 ;
   height: 300vh; 
}

先设置标题格式，字体设置为Arial，margin\padding设置为0，字体设置为48px，颜色为白色，字符间距为-0.5px。创建一个弹性盒子Flex，以确保文字在空间内的正确布局，将盒子内的文字元素居中排列并设置在布局中心。

接着给文字设置一个元素背景图像，使用linear-gradient函数，实现三种颜色的线性渐变，设置角度为60deg，渐变颜色分别为：
第一段（0~33%）纯白色
第二段（33%~66%）从透明度1降到0的纯白色
第三段（66%-100%)完全透明的纯白色。

将这个渐变的白色背景图像，做一个高度不变、宽度3倍的拉伸。