共计 4866 个字符,预计需要花费 13 分钟才能阅读完成。
每年的苹果新产品公布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都十分有意思,往年 iPhone 14 Pro 的介绍页不例外。
最近,刚好有敌人问到,其对官网的一段文字特效特地感兴趣,看实用简略却不知从何下手,咱们来看看:
整个动画大抵是,随着页面的向下滚动,整个文字从无到呈现,再经验一轮渐变色的变动,最初再逐步隐没。
本文,就将介绍 2 种应用 CSS 实现该成果的形式。
应用 background-clip 实现
第一种形式是借助 background-clip
。
background-clip
:background-clip 设置元素的背景(背景图片或色彩)是否延长到边框、内边距盒子、内容盒子上面。
而 background-clip: text
能够实现背景被裁剪成文字的前景色。应用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
看个最简略的 Demo,没有应用 background-clip:text
:
<div>Clip</div>
<style>
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
}
</style>
成果如下:
CodePen Demo
应用 background-clip:text
咱们略微革新下下面的代码,增加 background-clip:text
:
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
background-clip: text;
}
成果如下:
看到这里,可能有人就纳闷了,,啥玩意呢,这不就是文字设置 color
属性嘛。
将文字设为通明 color: transparent
别急!当然还有更有意思的,下面因为文字设置了色彩,挡住了 div 块的背景,如果将文字设置为通明呢?文字是能够设置为通明的 color: transparent
。
div {
color: transparent;
background-clip: text;
}
成果如下:
CodePen Demo – background-clip: text
通过将文字设置为通明,本来 div 的背景就显现出来了,而文字以外的区域全副被裁剪了,这就是 background-clip: text
的作用。
因而,对于上述成果,咱们只须要实现一个 从通明到渐变色到通明 的突变背景即可,随着鼠标的滚动挪动背景的 background-position
即可!
有了下面的铺垫,咱们很容易的实现上述的苹果官网的文字效果。(先不思考滚动的话)
看看代码:
<div class="g-wrap">
<p> 灵动的 iPhone 新玩法,迎面而来。重大的平安新性能,为援救生命而设计。翻新的 4800 万像素主摄,让细节纤毫毕现。更有 iPhone 芯片中的速度之王,为所有提供弱小原动力。</p>
</div>
.g-wrap {
background: #000;
p {
width: 800px;
color: transparent;
background: linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent);
background-clip: text;
background-size: 100% 400%;
background-position: center 0;
animation: textScroll 6s infinite linear alternate;
}
}
@keyframes textScroll {
100% {background-position: center 100%;}
}
咱们这里外围的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent)
这个突变背景,实现一个 从通明到渐变色到通明 的突变背景,配合了 background-clip: text
。
再利用动画,管制背景的 background-position
,这样一个文字渐现再渐隐的文字动画就实现了:
CodePen Demo — iPhone 14 Pro Text Animation | background-clip: text
应用 mix-blend-mode 实现
下面一种形式很好,这里再介绍另外一种应用混合模式 mix-blend-mode
实现的形式。
假如,咱们先实现这样一幅黑底白字的构造:
<div class="text"> 灵动的 iPhone 新玩法,迎面而来。重大的平安新性能,为援救生命而设计。翻新的 4800 万像素主摄,让细节纤毫毕现。更有 iPhone 芯片中的速度之王,为所有提供弱小原动力。</div>
.text {
color: #fff;
background: #000;
}
再另外实现这样一个突变背景,从 彩色到渐变色(#ffb6ff 到 #b344ff)到彩色的渐变色:
<div class="g-wrap">
<div class="text"> 灵动的 iPhone 新玩法,迎面而来。重大的平安新性能,为援救生命而设计。翻新的 4800 万像素主摄,让细节纤毫毕现。更有 iPhone 芯片中的速度之王,为所有提供弱小原动力。<div class="bg"></div>
</div>
</div>
.text {
position: relative;
color: #fff;
background: #000;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
}
.bg
大略是长这样,绝对于 .text
而言,其高度是其 4 倍:
这两个图形叠加在一起会是咋样?应该不会有太多 化学反应:
咱们给 .bg
加上一个高低挪动的动画,咱们看看成果:
如同没什么货色?文字也被挡住了。然而!如果在这里,咱们使用上混合模式,那成果就齐全不一样了,这里,咱们会使用到 mix-blend-mode: darken
。
.bg {
//...
mix-blend-mode: darken
}
再看看成果:
Wow,借助不同的混合模式,咱们能够实现不同的色彩叠加成果。这里 mix-blend-mode: darken
的作用是,只有红色文字局部会显现出下层的 .bg
的色彩,而彩色背景局部与下层背景叠加的色彩仍旧为彩色,与 background-clip: text
有殊途同归之妙。
再简略的借助 overflow: hidden
,裁剪掉 .text
元素外的背景挪动,整个动画就实现了。
残缺的代码如下:
<div class="g-wrap">
<div class="text"> 灵动的 iPhone 新玩法,迎面而来。重大的平安新性能,为援救生命而设计。翻新的 4800 万像素主摄,让细节纤毫毕现。更有 iPhone 芯片中的速度之王,为所有提供弱小原动力。<div class="bg"></div>
</div>
</div>
.g-wrap {
width: 100vw;
height: 100vh;
background: #000;
.text {
position: relative;
color: transparent;
color: #fff;
background: #000;
overflow: hidden;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
mix-blend-mode: darken;
animation: textScroll 6s infinite linear alternate;
}
}
@keyframes textScroll {
100% {transform: translate(0, -75%);
}
}
这样,借助混合模式,咱们也实现了题目的文字特效:
CodePen Demo — iPhone 14 Pro Text Animation | mix-blend-mode
联合滚动实现动画
当然,原动画的实现是联合页面的滚动实现的。
在之前,我介绍了 CSS 最新的个性 @scroll-timeline
,譬如这两篇文章:
- 革命性翻新,动画杀手锏 @scroll-timeline
- 超酷炫的转场动画?CSS 轻松拿下!
@scroll-timeline
可能设定一个动画的开始和完结由滚动容器内的滚动进度决定,而不是由工夫决定。
意思是,咱们能够定义一个动画成果,该动画的开始和完结能够通过容器的滚动来进行管制。
然而!伤心的是,这个如此好的个性,最近曾经被标准废除,曾经不再举荐应用了:
这里,咱们应用传统的办法,那就必须得借助了 JavaScript 了,JavaScript 联合滚动的局部不是本文的重点,对于页面滚动配合动画时间轴,咱们通常会应用 GSAP。
咱们联合上述的混合模式的办法,很容易失去联合页面滚动的残缺代码:
<div class="g-wrap">
<div class="text"> 灵动的 iPhone 新玩法,迎面而来。重大的平安新性能,为援救生命而设计。翻新的 4800 万像素主摄,让细节纤毫毕现。更有 iPhone 芯片中的速度之王,为所有提供弱小原动力。<div class="bg"></div>
</div>
</div>
<div class="g-scroll"></div>
.g-wrap {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100vw;
height: 100vh;
background: #000;
.text {
position: relative;
width: 800px;
color: #fff;
background: #000;
overflow: hidden;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff, #b344ff, #000 75%, #000);
mix-blend-mode: darken;
}
}
.g-scroll {
position: relative;
width: 100vw;
height: 400vw;
}
gsap.timeline({
scrollTrigger: {
trigger: ".g-scroll",
start: "top top",
end: "bottom bottom",
scrub: 1
}
}).fromTo(".bg", { y: 0}, {y: "-75%"}, 0);
能够看到,惟一的不同之处,就是利用了 gsap.timeline
联合滚动容器,触发动画。
成果如下:
CodePen Demo — iPhone 14 Pro Text Animation | GSAP
最初
好了,本文到此结束,心愿本文对你有所帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。