百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

使用CSS实现苹果官网文字渐入效果

zhezhongyun 2025-05-22 14:55 5 浏览

效果

分析

文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。

我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。

渐变文字

渐变文字该如何实现呢？这是实现这个效果的关键步骤。

其实就是给文字设置渐变背景，然后将文字自身的颜色透明化，最后做一个背景裁切。

h1 {
  background-image: linear-gradient(90deg, red, yellow, red, yellow, red);
  color: transparent;

  /* 背景被裁剪成文字的前景色。 */
  background-clip: text;
  -webkit-background-clip: text;
}

<body>
    <h1>一个爬坑的Coder</h1>
</body>

进入正题

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%;
}
<body>
    <h1>一个爬坑的Coder</h1>
</body>

相关推荐

办公小技巧:杜绝意外 让字体永不丢失

当精心编辑的文档，在其它电脑上打开时，最常见的问题就是页数增加了，表格被撑破了，有些严重的甚至会出现乱码……为什么会这样呢？究其根源都是因为缺少相应的字体。本文介绍各类文档中（包括Word文档、PPT...

网站速度优化:从10秒到2秒的极致性能提升方案

核心内容：性能诊断工具：PageSpeedInsights与Lighthouse的评分差异解读。WebPageTest多地区、多设备性能对比。前端优化：CSS/JS压缩与合并的自动化方案（如Webp...

如何在WordPress中删除谷歌字体(2种简单方法)

许多WordPress主题都会用Google字体，然而，Google字体并不存储在网站本地，它是一个第三方资源，这会影响网站的加载速度，让网站变慢，尤其当你的网站面向的是国内用户时，更需要禁用Goog...

2019年免费可商用字体大全(附打包下载)

私信“字体”可免费获得。附送一个几十G的，有商业授权要求的字体包！不说那么复杂了，简单讲，可能你下载的大多数字体都是收费的。比如方正、文鼎、汉仪等的90%以上需要商业授权，甚至个人授权。这儿的授权，指...

开源免费、美观实用的后台管理系统模版，简单轻量、开箱即用!

项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模版，专注于用户体验和快速开发的开源后台管理解决方案。基于ElementPlus设计...

【推荐】一款开源免费、美观实用的后台管理系统模版

如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模...

想要字体图标设计师却给了SVG?没关系，自己转

本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自Mater...

零基础教你学前端——66、CSS谷歌字体和Icon图标

我们学习CSS谷歌字体和CSSIcon图标。我们在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体。谷歌字体是免费使用的，并且有1000多种字体...

必须掌握的前端开发基础知识，什么是字体图标?

必须掌握的前端开发基础知识,什么是字体图标?显示隐藏元素display显示隐藏none隐藏block显示隐藏后不再占有原来的位置visibility隐藏元素后,继续占有原来的位置visible元...

让你的网站速度提升10倍!(四):压缩~~~

在前面的内容中讲了如何降低页面大小（给页面瘦身）,重点讲的是如何优化图片，而没有讲文本内容如何优化，这是因为与其辛苦的优化文本还不如使用我们的秘密武器：Gzip压缩！如果你还不清楚Gzip是什么，看这...

MFC转QT - Qt界面开发 - 常用控件

基础控件(QPushButton,QLabel,QLineEdit等)按钮控件族Qt提供了丰富的按钮控件，比MFC的按钮控件更加细分和功能丰富。QPushButton（标准按钮）//创建按钮...

使用CSS实现苹果官网文字渐入效果

效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。渐变文字渐变文字该如何实现呢？这是实现这个效果的关键...

HarmonyOS NEXT - ArkUI: Text组件

Text组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。文本样式的属性如下表：.f...

计算机网络的 166 个核心概念，你知道吗?

上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...

软网推荐:请个多功能纯文本管理助手

纯文本不单是指常用的语言文字，还包括各种类型的程序代码、编码等。作为常用的纯文本处理工具，“记事本”显得力不从心。我们可用一款免费软件AlternateTextbrowser，随心所欲地管理各种类型...

一周热门
最近发表
标签列表