CSS 仿苹果官网文字渐入效果代码
本文主要是通过 CSS 代码实现类似苹果官网文字渐入效果,浏览过苹果官网都知道,文字是从左到右慢慢展示出来,而不是整体消失和出现,接下来结合示例代码详解实现过程,需要的小伙伴可以参考下。
先看一下最终效果:
分析
文字是从左到右慢慢呈现出来,不是整体消失和出现,所以这里肯定不能使用透明度。
我们可以使用渐变文字,然后通过改变背景的位置来控制文字的显示与隐藏。
渐变文字
如何实现渐变文字?这是实现本文效果的关键步骤。
其实就是给文字设置渐变背景,然后将文字自身的颜色透明化,最后做一个背景裁切。
<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>
完整 css 代码:
<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>