◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS实现苹果官网文字渐入效果(示例代码)
ID:16081 / 打印效果
分析
文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。
我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。
渐变文字
渐变文字该如何实现呢？这是实现这个效果的关键步骤。
其实就是给文字设置渐变背景，然后将文字自身的颜色透明化，最后做一个背景裁切。
<style> h1 { background-image: linear-gradient(90deg, red, yellow, red, yellow, red); color: transparent; /* 背景被裁剪成文字的前景色。 */ background-clip: text; -webkit-background-clip: text; } </style> <body> <h1>一个爬坑的Coder</h1> </body>进入正题
<style> body { background-color: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { color: #fff; font-size: 48px; background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.3%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%); /* 将背景渐变拉伸到3倍的长度 */ background-size: 300% 100%; /* 0%的话就是被整个白色覆盖, 文字就显示出来 50%的话就在33.3% - 66.67%这段渐变色覆盖(白色渐变都透明色) 100%的话就是66.67% - 100% 这段透明色覆盖, 文字就透明了 */ /* 那我们只需要动态改变position: 100% -> 0%即可 */ background-position-x: 100%; background-clip: text; -webkit-background-clip: text; color: transparent; transition: background-position-x 2s ease-in-out; } h1:hover { background-position-x: 0%; } </style> <body> <h1>一个爬坑的Coder</h1> </body>