前言
每当苹果官网发布新产品的时候,都会给我们带来眼前一亮的设计。
今天我们来实现上面视频中的文字渐入效果。
首先将需要展示的文字输入标题内(此处省略基本格式)。
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倍的拉伸。